UI5中如何将API返回的JSONModel数据绑定到sap.m.Table？

问题分析 #

你当前的代码存在几个关键问题：

• 属性大小写不匹配：数据源中是大写的Info，但你绑定用了小写info，导致无法匹配到数据。
• 绑定语法错误：UI5的绑定路径分隔符是/，不是>；且列表项内应该使用相对绑定（基于items的当前上下文），而非绝对路径。
• Table结构不完整：缺少<columns>定义和<ColumnListItem>模板，这是sap.m.Table渲染数据的必要结构。

正确的XML视图代码 #

<Table items="{samplemodel>/}">
  <!-- 定义列 -->
  <columns>
    <Column>
      <Text text="主ID"/>
    </Column>
    <Column>
      <Text text="子ID"/>
    </Column>
    <Column>
      <Text text="子名称"/>
    </Column>
  </columns>
  <!-- 列表项模板 -->
  <items>
    <ColumnListItem>
      <!-- 绑定主ID：基于当前列表项上下文，相对路径访问Info/Id -->
      <cells>
        <Text text="{Info/Id}"/>
        <!-- 绑定子数组的第一个元素的id/name -->
        <Text text="{Info/val/0/id}"/>
        <Text text="{Info/val/0/name}"/>
      </cells>
    </ColumnListItem>
  </items>
</Table>

额外说明 #

1. 模型初始化验证：确保你已经正确将数据设置到JSONModel并注册到视图/组件，控制器代码示例：

// 假设从API获取到的data是你提供的数组
const oModel = new sap.ui.model.json.JSONModel(data);
// 注册模型到视图，名称为samplemodel
this.getView().setModel(oModel, "samplemodel");

2. 子数组多元素展示：如果val数组有多个元素，可在单元格内嵌套List实现循环展示：

<cells>
  <Text text="{Info/Id}"/>
  <List items="{Info/val}">
    <StandardListItem title="{id}" description="{name}"/>
  </List>
</cells>

内容的提问来源于stack exchange，提问作者AngularDev