【sapui5】sap.ui.table.tableの中にセットしたComboBoxの値を取得する方法


# はじめに
　sap.ui.table.tableを使用している状態で、テーブルの中にあるコンボボックスの値をコントローラ側で取得する際に、（スクロール発生時など）画面外のデータを取得する際にエラーが発生するので、対処方法を以下に記載します。

# 画面イメージ
　sap.ui.table.tableを使用しているテーブルの中にComboBoxをセットします。
スクロールが発生していることにより、①～⑧が表示されている場合は、⑨⑩は表示されていない状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/da5a14e8-166c-62bb-ff69-4d50f7c8b6a0.png)
下にスライドすると、⑨⑩が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/25d4277b-d4bb-8bee-4c6f-dff6e9370aaf.png)

この場合の⑨⑩のComboBoxの値を取得しようと思います。

### ソースコード
　上記の画面の初期表示のソースコードは以下になります。
```ruby:page1.controller.js
onInit: function () {
	var foodData = { 
		"products" :[
			{
				"name" : "りんご",
				"id": 1111,
				"startDate": "2022/05/01",
				"price": 100
			},
			{
				"name" : "オレンジ",
				"id": 1112,
				"startDate": "2022/05/02",
				"price": 110
			},
			{
				"name" : "バナナ",
				"id": 1113,
				"startDate": "2022/05/01",
				"price": 180
			},
			{
				"name" : "桃",
				"id": 1114,
				"startDate": "2022/05/05",
				"price": 200
			},
			{
				"name" : "スイカ",
				"id": 1115,
				"startDate": "2022/05/03",
				"price": 1000
			},
			{
				"name" : "レモン",
				"id": 1116,
				"startDate": "2022/05/04",
				"price": 130
			},
			{
				"name" : "マンゴー",
				"id": 1117,
				"startDate": "2022/05/05",
				"price": 400
			},
			{
				"name" : "ふどう",
				"id": 1118,
				"startDate": "2022/05/10",
				"price": 300
			},
			{
				"name" : "キウイ",
				"id": 1119,
				"startDate": "2022/05/04",
				"price": 100
			},
			{
				"name" : "いちご",
				"id": 1120,
				"startDate": "2022/04/30",
				"price": 500
			}
			
		]
	};

	this.getView().setModel(new JSONModel(foodData), "food");
	this.getView().getModel("food").setProperty("/statusKey");

	var statusData = 
		[
			{
				"key" : 1,
				"name" : "販売中"
			},
			{
				"key" : 2,
				"name" : "残り少し"
			},
			{
				"key" : 3,
				"name" : "完売"
			}
		];
	
	this.getView().setModel(new JSONModel());
	this.getView().getModel().setProperty("/status", statusData);
},
```

# エラーの内容
①～⑩までのComboBoxに値を入れ、「登録」ボタンを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/ae2fa2ee-8064-0fda-cb8c-c4bf4276e3ce.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1855659/46d008f9-200b-4626-681a-25fab722abc1.png)


### ソースコード
```ruby:page1.view.xml
<tbl:Table
	id="table"
	rowActionCount="1"
	rows="{food>/products}"
	selectionMode="None"
	visibleRowCount="8">
	<tbl:columns>
		<tbl:Column id="food" width="15rem" >
			<Label text="{i18n>name}" textAlign="Center" />
			<tbl:template>
				<Text text="{food>name}" wrapping="false" />
			</tbl:template>
		</tbl:Column>
		
		（商品番号・販売開始日・値段に関しては省略）
		
		<tbl:Column id="status" width="15rem" >
			<Label text="{i18n>status}" textAlign="Center" />
			<tbl:template>
				<ComboBox id ="statusBox" selectedKey="{food>statusKey}" 
					items="{path: '/status', templateShareable : true }">
					<core:Item key="{key}" text="{name}" />
				</ComboBox>
			</tbl:template>
		</tbl:Column>
	</tbl:columns>
	<!-- フッタ -->
	<tbl:footer>
		<Toolbar width="100%">
		<ToolbarSpacer/>
			<Button id="onPush" text="{i18n>register}" press="onPush"/>
		</Toolbar>
	</tbl:footer>
</tbl:Table>
```
```ruby:page1.controller.js
onPush: function (oEvent) {
	var food = this.getView().getModel("food").getData().products;

	for(var i in food){
		var statusValue = this.getView().byId("table").$().find("input")[i].value;
		console.log(food[i].name, ":",statusValue);
	}
}
```
### 結果
　上記のソースコードのように、コントローラ側で取得しようとすると、⑨キウイのComboBoxの値を取得する際に以下のエラーが発生します。

（以下、console.logの中身）
　りんご : 販売中
　オレンジ : 販売中
　バナナ : 販売中
　桃 : 販売中
　スイカ : 残り少し
　レモン : 残り少し
　マンゴー : 残り少し
　ふどう : 残り少し

:::note alert
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
:::

# 対処方法
　Modelに値を格納すると、画面外のComboBoxの値を取得できるようになります。
### ソースコード
ComboBoxにvalue="{food>status}"を追加します。
```ruby:page1.view.xml
	<tbl:Column id="status" width="15rem" >
		<Label text="{i18n>status}" textAlign="Center" />
		<tbl:template>
			<ComboBox id ="statusBox" value="{food>status}" selectedKey="{food>statusKey}" 
				items="{path: '/status', templateShareable : true }">
				<core:Item key="{key}" text="{name}" />
			</ComboBox>
		</tbl:template>
	</tbl:Column>
</tbl:columns>
```
```ruby:page1.controller.js
onPush: function (oEvent) {
	var food = this.getView().getModel("food").getData().products;

	for(var i in food){
		console.log(food[i].name, ":",food[i].status);
	}
}
```
### 結果

　りんご : 販売中
　オレンジ : 販売中
　バナナ : 販売中
　桃 : 販売中
　スイカ : 残り少し
　レモン : 残り少し
　マンゴー : 残り少し
　ふどう : 残り少し
　キウイ : 完売
　いちご : 完売

# まとめ
　エラーの原因を調査する際に、解決できる記事が見当たらなかったため、もし同じエラーで躓いている方がいれば参考にしていただけると幸いです。