通过 Angular ngFor 指令中的索引访问数组的值

Question

我需要通过ngFor指令 angular 中的索引访问数组项的值

假设我有 entityList 数组。 我也有 columnNames 数组，它为我提供了要生成的 td 数。 所以 columnNames 充当表头， entityList 有数据以表格格式显示。

{
    "Id": 1,
    "Name": "Admin",
}
{
    "Id": 2,
    "Name": "Finance",
}


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

我知道我可以像下面那样做，但是我想使用索引而不是名称来打印值。

<tr *ngFor="let entity of entityList;let i = index">
    {{entity.Id}}
    {{entity.Name}}
</tr>

Answer 1

通过索引访问条目的属性是不可能的，因为它不是数组而是对象。 您可以做的是获得类似行为的是其属性及其键。

ts

  keys = Object.keys;

  entityList = [
    { id: 1, name: 'Admin' },
    { id: 2, name: 'Finance' }
  ];

html

<div *ngFor="let entity of entityList;">
    <span>
        {{ entity[keys(entity)[0]] }} // here you can access the keys index
    </span>
</div>

基本上这个想法是获取数组中的属性键，选择第一个/第二个，然后通过这个键访问对象属性。