JSONをAngular2で表示するには

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構造がありますもっと複雑です。私はパイプを使用しようとしましたが、正しく使用しているかどうかはわかりません。だ

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

*私は一度状態をdislay、その後、すべてのdallasesを繰り返したいと思いngFor

*ngFor="let vehicle of vehicles | keys" 

（車両[]）。あなたが2 ngForのをループしてい

Answer 1

少なくとも、あなたはここに1個のエラーがあります。

dallassettings: '3' // string 

をが、あなたのインターフェイスであなたが持っている：

dallassettings: number; 

次にあなたがMatthiasesの実装を実装する場合、置きます*ngIf - 私はあなたのデータが非同期であると思うので、ビューはレンダリングされます。bデータが取得されると、未定義のエラーが発生します。

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

EDITあなたあなたはそれが「S」でvehicles.statusである必要があり、間違った属性を使用しているので、あなたのステータスは、未定義です。私はこの記事を編集したときに、答えに "s"を追加しました。これは正しいでしょう:)

Answer 2

：

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