Объект JSON в объекте ссылается на HHML

Question

У меня есть JSON-файл данных типа: trip.В поездке находится объект: драйвер (с именем, идентификатором и т. Д.).

{
  "id": "1",
  "gpsStart": "N50.418716° , E006.750000°",
  "gpsEnd": "N50.318516° , E006.750000°",
  "tripBuinsness": true,
  "startOdometer": 25698,
  "endOdometer": 25700,
  "wayPoints": [
    "N50.418716° , E006.750000°",

  ],
  "driver": [{
    "name": "Theo"
  }]
}

Как мне ссылаться на имя драйвера в html?

<tbody>
  <tr *ngFor="let trip of trips">
    <td>{{trip.projectName}}</td>
    <td>{{trip.driver}}</td>
  </tr>
</tbody>

Answer 1

Если вам нужен только первый драйвер, вы можете получить к нему доступ через 0-й индекс:

<tbody>
  <tr *ngFor="let trip of trips">
    <td>{{trip.projectName}}</td>
    <td>{{trip.driver[0].name}}</td>
  </tr>
</tbody>

Но если вы хотите, чтобы все драйверы добавили еще один цикл ngFor в ваш шаблон:

<tbody>
  <tr *ngFor="let trip of trips">
    <td>{{trip.projectName}}</td>
    <td>
      <span *ngFor="let d of trip.driver">{{d.name}} </span>
    </td>
  </tr>
</tbody>

Answer 2

'драйвер' - это массив. Я думаю, что вы можете получить доступ к имени, выполнив trip.driver [0] .name или выполнив итерацию по trip.driver.

Answer 3

Вам не нужно ngFor за отключение, поскольку это объект, измените его на trip.driver, который является массивом объектов,

<tbody>
<tr *ngFor="let driver of trip.driver">
  <td>{{driver.name}}</td> 
</tr>
</tbody>