Angular JS 2.0获取JSON数据并使用Ng for显示

Question

我正在尝试通过JSON数据循环并在angular中显示它。到目前为止，我可以使用函数在控制台中显示，但不能将其绑定到div或循环。我一直在看其他的帖子，但他们的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); 
    }    
}

这是我不确定如何绑定数据

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

Answer 1

在.map行中，您应该获得json，因为我假设您的数据是json格式。

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