Question

我有一个typ：trip的JSON数据文件。旅途中是一个对象：驱动程序（带有名称，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 ，因为它是对象，因此可以通过 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 [0] .name或遍历trip.driver来访问名称。

HHML中的对象引用中的JSON对象

3 个答案: