javascript - 如何使用 *ngFor 循环 [object Object]

Question

我正在尝试像这样使用 *ngFor 循环遍历这个数组。

  let geographicalArea  = [{
    "_id": "5e77f43e48348935b4571fa7",
    "name": "Latin America",
    "employee": {
      "_id": "5e77c50c4476e734d8b30dc6",
      "name": "Thomas",
      "lastName": "Smith",
      "_v": 0
    },
    "_v": 0
  },
  {
    "_id": "5e77ff92165aa2060c54a5aa",
    "name": "Oceania",
    "employee": {
      "_id": "5e76c50c4476e734d8b30dc6",
      "name": "Joe",
      "lastName": "Duff",
      "_v": 0
    },
    "_v": 0
  }]

Html，但是当我尝试获取员工姓名时，它返回我无法读取未定义的属性“名称”

<tr *ngFor="let geo of geographicalArea | keyvalue">
                        <td>{{geo.value.name}}</td>
                        <td>{{geo.value.employee.name}}</td>
</tr>

我尝试仅显示员工，但它返回[object Object]

<tr *ngFor="let geo of geographicalArea | keyvalue">
                        <td>{{geo.value.name}}</td>
                        <td>{{geo.value.employee}}</td>
</tr>

我寻找通过对象内部的对象的方法，找到了管道键值，但它没有返回员工的信息，这将是使用此管道获取此信息的最合适的方式

Answer 1

您不需要使用 keyvalue 管道来循环 geographicalArea，因为它是一个数组。但是，如果您想循环遍历geographicalArea内的每个employee，那么您需要keyvalue管道，因为它是一个对象。

<tr *ngFor="let geo of geographicalArea">
  <td>{{geo.name}}</td>
  <td>{{geo.employee.name}}</td>
  <div *ngFor="let employee of geo.employee | keyvalue">
    {{ employee.key }} : {{ employee.value }}
  </div>
</tr>