Question

我在URL中有一个JSON数组，我正试图从中获取信息，因此可以在ngFor中使用它。如果我想获得链接或名称并在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>

控制台错误：

错误错误：找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

Answer 1

ngFor不对对象进行迭代，仅对数组进行迭代。

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数据

1 个答案: