如何在Angular的ngFor指令中通过索引访问数组项对应属性值

实现方法 #

你直接用entity[i]不生效的原因是：普通JS对象无法通过数字索引直接读取属性，你的i是表头数组columnNames的下标，需要先用下标取到对应属性名，再访问实体的属性值即可。

方案1（推荐，顺序可控）

直接通过索引从columnNames中取对应的属性名，再访问实体属性：

<tr *ngFor="let entity of entityList">
  <td *ngFor="let column of columnNames;let i = index">
    {{entity[columnNames[i]]}}
  </td>
</tr>

比如你的columnNames定义为['Id', 'Name']，当i=0时会取到属性名Id，再读取entity['Id']就能拿到对应值，完全符合你通过索引取值的需求。该方案的列显示顺序完全由你定义的columnNames控制，不会因为实体属性顺序变化出现错位。

方案2（不依赖columnNames）

如果你不需要依赖表头数组，想直接按实体属性的定义顺序用索引取值，可以先在组件类中写一个属性转数组的方法：

// 组件ts文件中添加方法
getEntityValues(entity: any): any[] {
  return Object.values(entity);
}

模板中调用方法后用索引访问即可：

<tr *ngFor="let entity of entityList">
  <td *ngFor="let column of columnNames;let i = index">
    {{getEntityValues(entity)[i]}}
  </td>
</tr>

注意该方案依赖Object.values的返回顺序，ES6+规范中会按属性定义的顺序返回，若后续实体属性顺序调整会导致列显示错位，不推荐复杂场景使用。

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