Angular中如何从嵌套对象渲染多个表格？

你的myObject结构中，外层每个键对应的值是对象数组（比如'V-FR-TH1'对应[{ version: '1.1', ... }]），但模板里直接调用item.value.modifiedNumbers——数组本身没有modifiedNumbers属性，这就是报错的核心原因。

修复方案1：直接访问数组首个元素（匹配当前数据结构） #

当前每个外层键对应的数组仅包含一个对象，可直接取数组第一个元素来访问modifiedNumbers：

<div *ngFor="let item of myObject | keyvalue: mySortingFunction">
  <div style="background-color:yellow">
    {{ item.key }}
  </div>
 <table>
    <tr> <!-- 修复：表头必须包裹在<tr>标签内，否则HTML结构无效 -->
      <td>id</td>
      <td>name</td>
    </tr>
    <tr *ngFor="let innerItem of item.value[0].modifiedNumbers">
      <td>{{ innerItem.id }}</td>
      <td>{{ innerItem.name }}</td>
    </tr>
</table>
<br />
</div>

修复方案2：新增一层遍历（兼容数组多元素场景） #

如果后续外层键对应的数组可能包含多个对象，需要为每个对象单独渲染内容，可再加一层*ngFor遍历数组内的对象：

<div *ngFor="let item of myObject | keyvalue: mySortingFunction">
  <div style="background-color:yellow">
    {{ item.key }}
  </div>
  <!-- 遍历外层数组中的每个对象 -->
  <div *ngFor="let obj of item.value">
    <table>
      <tr>
        <td>id</td>
        <td>name</td>
      </tr>
      <tr *ngFor="let innerItem of obj.modifiedNumbers">
        <td>{{ innerItem.id }}</td>
        <td>{{ innerItem.name }}</td>
      </tr>
    </table>
    <br />
  </div>
</div>

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