Ionic 在离子格式中迭代 *ngFor

wz8daaqr  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(144)

我尝试使用*ngFor迭代一个数组,但它不起作用。下面是我的代码。
My API Data showing like this in console widow

类型脚本代码

tailors: Tailors[] = [];

  getTailors() {
    this.tailorService.getTailors().subscribe(x => {
      Object.assign(this.tailors, x);
      console.log(x);
    });
  }

超文本标记语言

<ion-item class="animate__animated animate__fadeInUp" *ngFor="let tailor of tailors">
  <div class="item_inner d-flex">
   
    <div class="text_box">
      <h3>{{tailor.data.Name}}</h3>
    
    </div>
  </div>
</ion-item>
5lhxktic

5lhxktic1#

您在*ngFor中的有界属性是一个对象文本,而不是数组。您必须遍历tailors['data']
我假设您遇到了一个错误,指出**“NgFor仅支持绑定到诸如Arrays之类的Iterables”**。
模板中的代码应为

*ngFor="let tailor of tailors['data']"

或者更好的是,当您在.ts内部分配后端响应时,您将裁缝绑定到x['data'],然后您不需要在模板中更改任何内容。
附言:我看不出你使用Object.assign()的必要性。也可以在你的下一篇文章中包含错误,以帮助人们帮助你。

相关问题