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

你必须循环2 ngFor's：

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

车辆是一个对象。我认为没有必要使用你提出的管道迭代密钥。您可以直接访问所需的成员。你应该迭代车辆的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>

Answer 3

至少你有一个错误：

dallassettings: '3' // string

但是在你的界面中你有：

dallassettings: number;

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

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

编辑你的状态是未定义的，因为你使用了错误的属性，它应该是vehicles.status和＃34; s＆＃34;。当我编辑这篇文章时，我还添加了＆＃34; s＆＃34;答案，以便它是正确的：）

如何在Angular2中显示该JSON

3 个答案: