在Angular中显示来自嵌套对象的多个表答案

【问题标题】：Display multiple tables from nested object in Angular在Angular中显示来自嵌套对象的多个表
【发布时间】：2022-11-01 10:38:23
【问题描述】：

我有一个这样的对象：

myObject = {
'V-FR-TH1': [
  {
    version: '1.1',
    objectId: '001',
    modifiedNumbers: [
      { name: 'mod1', id: '0001m' },
      { name: 'mod2', id: '0002m' },
      { name: 'mod21', id: '00021m' },
    ],
  },
],
'N-DE-HG4': [
  {
    version: '1.3',
    objectId: '003',
    modifiedNumbers: [
      { name: 'mod3', id: '0003m' },
      { name: 'mod3', id: '0003m' },
    ],
  },
 ],
};

还有一个简单的 html 来显示这样的表格：

当我尝试迭代内部对象（嵌套的 modifiedNumbers 数组）时，主要问题应该在这里

HTML代码：

<div *ngFor="let item of myObject | keyvalue: mySortingFunction">
  <div style="background-color:yellow">
    {{ item.key }}
  </div>
 <table>
    <td>id</td>
    <td>name</td>
    <tr *ngFor="let innerItem of item.value.modifiedNumbers">
      <td>{{ innerItem.id }}</td>
      <td>{{ innerItem.name }}</td>
    </tr>
</table>
<br />

我真的不知道如何解决这个问题，这是我尝试的沙盒链接： link here

它包含以下错误：

Property 'modifiedNumbers' does not exist on type '{ version: string; objectId: string; 
modifiedNumbers: { name: string; id: string; }[]; }[]'.

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

我希望下面的答案适合你。

让 item.value[0].modifiedNumbers 的 innerItem

<div *ngFor="let item of myObject | keyvalue: mySortingFunction">
  <div style="background-color:yellow">
    {{ item.key }}
  </div>
  <table>
    <td>id</td>
    <td>name</td>
    <tr *ngFor="let innerItem of item.value[0].modifiedNumbers ">
      <td>{{ innerItem.id}}</td>
      <td>{{ innerItem.name }}</td>
    </tr>
  </table>
  <br />
</div>

谢谢你。

【讨论】：