如何使用 *ngFor 循环 [object Object]答案

【问题标题】：How to loop over [object Object] using *ngFor如何使用 *ngFor 循环 [object Object]
【发布时间】：2020-03-23 17:56:10
【问题描述】：

我正在尝试像这样使用 *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，但是当我尝试获取员工姓名时，它返回给我Cannot read property 'name' of undefined

<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>

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

【问题讨论】：

标签： javascript arrays json angular

【解决方案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>

【讨论】：

谢谢。我认为使用管道我可以在不创建另一个 * ngFor 的情况下迭代对象，这对我有用

【解决方案2】：

您可以循环数组并直接访问内部对象属性，使用dot 运算符。

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

【讨论】：