Angular 2 使用 ngfor 获取 json 数据

Question

我在 URL 中得到了一个 JSON 数组，我正在尝试从中获取信息以便在 ngFor 中使用它。如果我想得到 link 或命名并在 ngFor 中使用它，我做错了什么？因为我在console.log(this.straip)中得到它，但在ngFor中不能使用它。

Component.ts

export interface straipsnelis {
  name: string;
  link: string;
}

straip = {} as straipsnelis;
ngOnInit() {
  this.http.get('this.url').subscribe((data:any) => {
    this.straip.link = data.map((a:any)=>a.guid);
    this.straip.name = data.map((a:any)=>a.slug);
    console.log(this.straip);
  })
}

HTML

<div *ngFor="let s of straip" class="cardukas">
  <div class="left-photo">{{s.link}}</div>
  <div class="right-info"></div>
</div>

控制台错误：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

ngFor does not iterate on objects , it iterates on array only.

TS:

export interface straipsnelis {
  name: string;
  link: string;
}

straip = {} as straipsnelis;

straipArray : Array<any> = []; 

ngOnInit() {
  this.http.get('this.url').subscribe((data:any) => {
    this.straip.link = data.map((a:any)=>a.guid);
    this.straip.name = data.map((a:any)=>a.slug);
    this.straipArray.push(this.straip)

    console.log(this.straip);
  })
}

HTML:

<div *ngFor="let s of straipArray" class="cardukas">
  <div class="left-photo">{{s.link}}</div>
  <div class="right-info"></div>
</div>

Angular 2 使用 ngfor 获取 json 数据

Angular 2 getting json data with ngfor

javascript

typescript

angular-http

angular