Angular动态遍历数组生成表格：为何直接遍历对象无效？

嘿，这个问题我碰到过！你的代码没法正常运行的核心原因很明确：
Angular的*ngFor指令只能遍历可迭代对象（比如数组、Map、Set这类实现了Iterable接口的类型），而你循环里的item是普通的JavaScript对象——默认情况下JS对象是不可迭代的，所以*ngFor="let list of item"这一行会直接报错，Angular不知道怎么遍历一个对象的键值对。

下面给你几个可行的解决方案：

方案1：在模板中用Object.values()遍历对象值 #

你可以用Object.values(item)把对象的所有值转换成数组，这样*ngFor就能正常遍历了。不过要注意：模板默认不能直接访问全局的Object对象，需要在组件类里把它暴露出来。

组件类代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  items = [{name: "jean", surname: "kruger"}, {name: "bobby", surname: "marais"}];
  // 把Object暴露给模板
  Object = Object;
}

模板代码：

<table>
  <tr *ngFor="let item of items">
    <td *ngFor="let value of Object.values(item)">{{value}}</td>
  </tr>
</table>

方案2：如果需要同时显示键和值，用Object.entries() #

要是你想把属性名（比如name、surname）也展示出来，可以用Object.entries()，它会把对象转换成[键, 值]形式的数组：

模板代码（同样需要在组件类里暴露Object）：

<table>
  <tr *ngFor="let item of items">
    <td *ngFor="let [key, value] of Object.entries(item)">
      {{key}}: {{value}}
    </td>
  </tr>
</table>

方案3：在组件类提前处理成数组 #

如果你不想在模板里写Object.values()，也可以在组件类里提前把每个对象转换成值数组，模板直接遍历处理好的数组：

组件类代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  items = [{name: "jean", surname: "kruger"}, {name: "bobby", surname: "marais"}];
  // 提前把每个对象转换成值数组
  itemValues = this.items.map(item => Object.values(item));
}

模板代码：

<table>
  <tr *ngFor="let values of itemValues">
    <td *ngFor="let value of values">{{value}}</td>
  </tr>
</table>

这三个方案都能解决你的问题，选哪个看你具体需求～

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