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

Question

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

假设我有 entityList 数组。我还有 columnNames 数组，它给出了要生成的 td 的数量。所以 columnNames 充当 table header 并且 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>

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

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

Access value of array by its index in Angular ngFor directive

ngfor

angular