Javascript SAP UI5中的数据绑定

我有一个类似下图的设计（见附图）。 模型是这样的：-

 {
  "Approvers": [
    {
      "AFE_ID": "DV-101007600DD",
      "AFE_NAME": "San Andreas 1",
      "COST_CENTER": "101007600",
      "LOCATION": "Midland",
      "VERSION": "Revised",
      "DEADLINE": "15th May 2020",
      "ACTION": "Approve/Reject",
      "STATUS": "Completed",
      "WBS_ID": "WBS Element 1",
      "CREATED_BY": "James Edwin",
      "CREATED_ON": "22-04-2020",
      "OWNER": "Dri Mathews",
      "LEVEL": {
        "LEVEL1": [
          {
            "APPROVER_NAME": "Sentra",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
          },
          {
            "APPROVER_NAME": "axis",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
          }
        ],
        "LEVEL2": [
          {
            "APPROVER_NAME": "bill",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
          },
          {
            "APPROVER_NAME": "oilp",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
          }
        ]
      }
    }
  ]
}

我试图以一种方式绑定，即基于级别创建两个框，并且每个框都应该具有json中的数据，即每个框中的级别1和级别2数据。在下面的代码中，我为Level绑定了网格控制器，它创建了两个框，但是当我尝试用表内容填充每个框时，它会得到相同的内容。请建议如何更正此绑定

<f:GridContainer id="demoGrid" items="{approversCollection>/Approvers/0/LEVEL}">
                                <f:layout>
                                    <f:GridContainerSettings rowSize="5rem" columnSize="5rem" gap="1rem"/>
                                </f:layout>
                                <f:layoutS>
                                    <f:GridContainerSettings rowSize="4rem" columnSize="4rem" gap="0.5rem"/>
                                </f:layoutS>
                                <f:items>
                                    <FlexBox class="columns">
                                        <layoutData>
                                            <f:GridContainerItemLayoutData columns="12"/>
                                        </layoutData>
                                        <VBox backgroundDesign="Solid" class="demo">
                                            <VBox>
                                                <Label text="Level" design="Bold" class="sapUiSmallMarginTop sapUiMediumMarginBegin"/>
                                            </VBox>
                                            <VBox>
                                                <Table id="idApproversTable" class="demo" inset="false" growing="true"
                                                    items="{ path: 'approversCollection>/Approvers/0/LEVEL/2' }">
                                                    <columns>
                                                        <Column demandPopin="true">
                                                            <Label text="APPROVER NAME" design="Bold"/>
                                                        </Column>
                                                        <Column minScreenWidth="Phone" demandPopin="true" hAlign="Center">
                                                            <Label text="DEPARTMENT" design="Bold"/>
                                                        </Column>
                                                        <Column minScreenWidth="Phone" demandPopin="true" hAlign="Center">
                                                            <Label text="APPROVED ON" design="Bold"/>
                                                        </Column>
                                                    </columns>
                                                    <items>
                                                        <ColumnListItem>
                                                            <cells>
                                                                <Text text="{approversCollection>APPROVER_NAME}"/>
                                                                <Text text="{approversCollection>DEPARTMENT}"/>
                                                                <Text text="{approversCollection>APPROVED_ON}"/>
                                                            </cells>
                                                        </ColumnListItem>
                                                    </items>
                                                </Table>
                                                <layoutData>
                                                    <FlexItemData growFactor="1" baseSize="0" backgroundDesign="Solid" styleClass="sapUiTinyMargin"/>
                                                </layoutData>
                                            </VBox>
                                        </VBox>
                                    </FlexBox>
                                </f:items>
                            </f:GridContainer>

---

您需要使用正确的绝对/相对路径，并相应地修改您的模型：

...
"LEVEL":  [
    { "DATA" : [
        {
            "APPROVER_NAME": "Sentra",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
        },
        {
            "APPROVER_NAME": "axis",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020",
            "LEVEL_ID": 1
        }
    ]},
    { "DATA" : [
        {
            "APPROVER_NAME": "bill",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
        },
        {
            "APPROVER_NAME": "oilp",
            "DEPARTMENT": "Drilling",
            "APPROVED_ON": "23-07-2020"
        }
    ]}
]
...

<f:GridContainer id="demoGrid" items="{approversCollection>/Approvers/0/LEVEL}">
...
    <Table id="idApproversTable" 
        class="demo"
        inset="false" 
        growing="true"
        items="{ path: 'approversCollection>DATA' }">
...
        <Text text="{approversCollection>APPROVER_NAME}"/>
        <Text text="{approversCollection>DEPARTMENT}"/>
        <Text text="{approversCollection>APPROVED_ON}"/>
    

。。。
“级别”：[
{“数据”：[
{
“批准人姓名”：“Sentra”，
“部门”：“钻井”，
“批准日期”：“23-07-2020”，
“级别ID”：1
},
{
“批准人姓名”：“axis”，
“部门”：“钻井”，
“批准日期”：“23-07-2020”，
“级别ID”：1
}
]},
{“数据”：[
{
“批准人姓名”：“账单”，
“部门”：“钻井”，
“批准日期”：“23-07-2020”
},
{
“批准人姓名”：“oilp”，
“部门”：“钻井”，
“批准日期”：“23-07-2020”
}
]}
]
...
...
...

是否可以更改数据？你能把LEVEL改成数组吗？@Marc-是的，你能把它改成数组。。好吧，那就请你这么做。但是如果

items=“{approversCollection>/Approvers/0/LEVEL}你将如何绑定它是我的问题

返回一个数组，则此路径正确。请显示您更新的JSON模型结构。如果我这样编写JSON模型，那么它将不会接受“数据”数组两次，它将被替换为最近的条目。我需要将其中一个命名为DATA，第二个命名为“DATA2”“像那样的东西，否则就不行了。请建议我如何更正此问题@A.vHDid是否检查了正确的数据结构？“级别”是一个对象数组。每个对象都可以包含一个属性“Data”，它是一个对象数组，其中，正如您的数据结构所示：“Level”是一个对象，它包含作为对象数组的属性“Level1”和“Level2”。您同意我的数据结构不正确；您可以随意更改数据，但我希望您理解为什么我希望LEVEL1作为对象数组，因为一个级别的后端可以有多个审批人。但是，您提供的数据结构也不正确。您提供的数据，请将其放入json格式化程序并查看，在数据数组中，您将只能看到最后一个条目。所以，是的，数据格式我不正确，我不确定数据应该如何更正。看看这个例子嘿，是的，谢谢你，它起作用了：），谢谢你在这方面付出的所有努力。