Angular2 - json 객체를 표시 할 수 없습니다.

Question

제 상사가 Angular2를 프로젝트에 구현하기로 결정했습니다. 나는이 기술에 대해 새롭다. URL에서 JSON을 표시하려고하지만 예상 한 결과가 아닙니다. * ngFor는 데이터를 표시하지 않습니다.

이

코드입니다 :

vehicle.service.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

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

    getVehicle() { 
     return this.http.get('https://jsonplaceholder.typicode.com/posts') 
      .map(res => res.json()); 
    }} 

vehicle.component.ts

import { Component } from '@angular/core'; 

import { VehicleService } from './vehicle.service'; 

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

    constructor(private vehicleService: VehicleService){ 
    this.vehicleService.getVehicle().subscribe(vehicle => { 
     /*console.log(vehicle);*/this.vehicle = vehicle; 
    }); 
    } 
} 

interface Vehicle { 
    id: number; 
    title: string; 
    body: string; 
} 

vehicle.html

<div *ngFor="let vehicle of vehicles"> 
    <h3>{{vehicle.title}}</h3> 
    <p>{{vehicle.body}}</p> 
</div> 
test 1-2-3 

출력은 "test 1-2-3"입니다. jsons가 콘솔 내부에 표시되는지 확인했습니다 : console.log(vehicle); - 작동 했으므로 Array of Objects를 반환합니다.

내가 뭘 잘못하고 있니? 어떤 아이디어를 내 코드를 수정하는 방법?

Answer 1

오류가 있습니다

this.vehicleService.getVehicle().subscribe(vehicle => { 
     this.vehicle = vehicle; 
}) 

을하지만 HTML에서 당신은 당신과 같이 가입에 this.vehicle에 "s"를 추가해야합니다 let vechicle of vehicles

를 참조하십시오

this.vehicleService.getVehicle().subscribe(vehicle => { 
     this.vehicles = vehicle; 
}) 

편집 : 로컬 변수 vehicle: Vehicle[]을 vechicles: Vehicle으로 변경하는 것을 잊었지만 직접 알아 냈습니다! ;)