Question

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

然后你使用＆＃34; dataToShow＆＃34;而在NgFor中。

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

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

1 个答案: