如何在 Angular2 中显示该 JSON

Question

如何使用 *ngFor 显示这个特定的 JSON？

{
    "status": 0,
    "dallases": [{
        "vehicle_id": 17954,
        "dallassettings": "3",
        "dallasupdated": "False",
        "dallas_list": [{
            "number": 666111222,
            "auth": 3
        }, {
            "number": 666777888,
            "auth": 4
        }, {
            "number": 123454321,
            "auth": 4
        }]
    }
}

vehicle.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Jsonp, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    constructor(private http: Http) { }

    getVehicle() {
        return this.http.get('myURL')
            .map(res => res.json());
    }
}

vehicle.component.ts

import { Component, enableProdMode } from '@angular/core';
import { VehicleService } from './vehicle.service';

enableProdMode();

@Component({
  //moduleId: module.id,  
  selector: 'vehicle-json',
  templateUrl: './vehicle.html',
  providers: [VehicleService]
})
export class VehicleComponent {
  //vehicles: Vehicle[];
  vehicles: GeneralVehicle[];

  constructor(private vehicleService: VehicleService) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
    });
  }
}

/*interface Vehicle {
  id: number;
  title: string;
  body: string;
}*/
interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: number;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

当我处理虚拟数据时，它很简单，但这个 JSON 结构更复杂。我尝试使用 Pipe，但我不确定我是否正确使用它。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'keys' })
export class VehiclePipe implements PipeTransform {
    transform(value, args: string[]): any {
        let keys = [];
        for (let key in value) {
            keys.push(key);
        }
        return keys;
    }
}

那是 *ngFor

*ngFor="let vehicle of vehicles | keys"

我想显示一次状态，然后重复所有的 dallases (Vehicle[])。

Answer 1

至少你这里有一个错误：

dallassettings: '3' // string

但是在你的界面中你有：

dallassettings: number;

然后，如果您实现 Matthiases 实现，请输入 *ngIf-statement，因为我怀疑您的数据是异步的，因此在检索数据之前呈现视图，这会导致未定义的错误。

<div *ngIf="vehicles"> // here!
  <h1>{{ vehicles.status }}</h1>
  <div *ngFor="let vehicle of vehicles.dallases">
    <div>ID: {{vehicle.vehicle_id}}</div>
    <div>Settings: {{vehicle.dallassettings}}</div>
    <div>Updated: {{vehicle.dallasupdated}}</div>
    <div *ngFor="let d of vehicle.dallas_list">
      <div>number: {{d.number}}</div>
      <div>auth: {{d.auth}}</div>
    </div>
  </div>
</div>

编辑您的状态未定义，因为您使用了错误的属性，它应该是带有“s”的vehicles.status。当我编辑这篇文章时，我还在答案中添加了“s”，以便它是正确的:)

Answer 2

你必须遍历 2 个 ngFor：

<div *ngFor="let vehicle of vehicles | keys">
    <h1>{{ vehicle.status }}</h1>
    <ul *ngFor="let dallas of vehicle.dallases">
        <li>{{ dallas | json }}</li> //Show the data you want
    </ul>
</div>

Answer 3

车辆是一个对象。我认为无需使用您建议的管道来迭代密钥。您可以直接访问您需要的成员。您应该遍历车辆的 dalasses 属性 - 这是一个数组。然后根据需要显示数组成员。例如。使用 json 管道获取文本格式，您还可以通过属性在模板内实现自定义格式。

例子：

<div>
  <h1>{{ vehicle.status }}</h1>
  <div *ngFor="let vehicle of vehicles.dallases">
    <div>ID: {{vehicle.vehicle_id}}</div>
    <div>Settings: {{vehicle.dallassettings}}</div>
    <div>Updated: {{vehicle.dallasupdated}}</div>
    <div *ngFor="let d of vehicle.dallas_list">
      <div>number: {{d.number}}</div>
      <div>auth: {{d.auth}}</div>
    </div>
  </div>
</div>