上司は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
出力は「テスト1-2-3」です。次を使用して、jsonがコンソール内に表示されるかどうかを確認しました。-動作しconsole.log(vehicle);、オブジェクトの配列を返します。
私は何が間違っているのですか？コードを修正する方法はありますか？
エラーがあります：
this.vehicleService.getVehicle().subscribe(vehicle => {
this.vehicle = vehicle;
})
しかしあなたのhtmlであなたは言及します let vechicle of vehicles
次のthis.vehicleように、サブスクリプションに「s」を追加する必要があります。
this.vehicleService.getVehicle().subscribe(vehicle => {
this.vehicles = vehicle;
})
編集：ローカル変数vehicle: Vehicle[]をに変更するという意味を忘れただけvechicles: Vehicleですが、あなたはそれを自分で理解したのです！;）
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加