Angualr JS 2.0 JSONデータを取得し、Ngで表示する

Question

JSONデータをループして角度表示しようとしています。これまでは、関数を使用してコンソールに表示することはできますが、divやループにバインドすることはできません。 iv'eは他の投稿を見ていますが、httpリクエストは機能しません。これが唯一のものです。私は、.map行と何か助けを兼ね備えています。

//footer.component.ts 
import { Component } from '@angular/core'; 
import { Injectable }  from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import {Observable} from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Component({ 
    selector: 'main-footer', 
    templateUrl: 'footer.html' 
// styleUrls: ['footer/footer.css'] 
}) 
@Injectable() 
export class FooterComponent{ 
    constructor (public http: Http) {} 
    getJson() { 
    this.http.get('app/testjson.json') 
    .map(res => res.text()) 
    .subscribe(
     data => this.showArray(data), 
     err => this.handleError(err), 
    () => console.log('Random Quote Complete') 
    ); 
    } 
    //error handling 
    private handleError(error: Response) { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error'); 
    } 
    //pass the data to console 
    showArray(data){ 
     console.log(data); 
    }  
} 

私は私はあなたのデータはJSON形式であることを推測するので、あなたは、JSONを取得する必要があり、データに.MAPラインで

// footer.html 
<button (click)="getJson()">Get JSON!</button> 
<div *ngFor="let key of data">{{key.league}}</div> 

Answer 1

をバインドする方法を確認していないところです。

.map(res => res.json()) 

データを表示するには、まずデータを保存する必要があります。私はそれを保存し、それをNgForにバインドするためのローカル変数を作成することをお勧めします。例：

let dataToShow = []; 

getJson() { 
this.http.get('app/testjson.json') 
.map(res => res.text()) 
.subscribe(
    data => this.dataToShow = data, 
    err => this.handleError(err), 
() => console.log('Random Quote Complete') 
); 
} 

次に、NgForでは「dataToShow」を使用します。

<div *ngFor="let key of dataToShow">{{key.league}}</div>