HHML中Object refer中的JSON对象

Question

我有一个类型为: trip的JSON数据文件。在trip中是一个对象: driver (带有名称、id等)。

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

你不需要ngFor over trip，因为它是一个对象，将它转换成trip.driver，它是一个对象数组，

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

Answer 2

如果您只想要第一个驱动程序，您可以通过第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 3

“‘driver”是一个数组。我认为您可以通过执行trip.driver.name或在trip.driver上迭代来访问该名称。