はじめに
sap.ui.table.tableを使用している状態で、テーブルの中にあるコンボボックスの値をコントローラ側で取得する際に、（スクロール発生時など）画面外のデータを取得する際にエラーが発生するので、対処方法を以下に記載します。
画面イメージ
sap.ui.table.tableを使用しているテーブルの中にComboBoxをセットします。
スクロールが発生していることにより、①～⑧が表示されている場合は、⑨⑩は表示されていない状態です。
下にスライドすると、⑨⑩が表示されます。
この場合の⑨⑩のComboBoxの値を取得しようと思います。
ソースコード
上記の画面の初期表示のソースコードは以下になります。
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に値を入れ、「登録」ボタンを押下します。
ソースコード
<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>
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の中身）
りんご : 販売中
オレンジ : 販売中
バナナ : 販売中
桃 : 販売中
スイカ : 残り少し
レモン : 残り少し
マンゴー : 残り少し
ふどう : 残り少し
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
対処方法
Modelに値を格納すると、画面外のComboBoxの値を取得できるようになります。
ソースコード
ComboBoxにvalue="{food>status}"を追加します。
<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>
onPush: function (oEvent) {
var food = this.getView().getModel("food").getData().products;
for(var i in food){
console.log(food[i].name, ":",food[i].status);
}
}
結果
りんご : 販売中
オレンジ : 販売中
バナナ : 販売中
桃 : 販売中
スイカ : 残り少し
レモン : 残り少し
マンゴー : 残り少し
ふどう : 残り少し
キウイ : 完売
いちご : 完売
まとめ
エラーの原因を調査する際に、解決できる記事が見当たらなかったため、もし同じエラーで躓いている方がいれば参考にしていただけると幸いです。