Как сделать l oop над [Object Object], используя * ngFor

Question

Я пытаюсь l oop через этот массив, используя * 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>

Я искал способ go через объект внутри объекта и нашел значение ключа трубы но он не возвращает информацию о сотруднике, что было бы наиболее подходящим способом получить эту информацию, используя этот канал

Answer 1

Вам не нужен канал keyvalue от l oop до geographicalArea, потому что это массив. Однако, если вы хотите пропустить l oop через каждый employee внутри geographicalArea, вам понадобится keyvalue pipe, потому что это объект.

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

Answer 2

Вы можете l oop над массивом и напрямую обращаться к свойству внутреннего объекта, используя оператор dot.

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