Ionic中使用*ngFor遍历数组失效，请求技术支持

我尝试用*ngFor指令遍历数组，但未成功。相关代码及信息如下：

API控制台输出显示，接口返回的是一个包含data属性的对象，data字段内才是需要遍历的裁缝列表数组。

TypeScript代码 #

tailors: Tailors[] = [];

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

HTML代码 #

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

问题分析与修复 #

核心问题

1. 数据赋值错误：用Object.assign(this.tailors, x)把整个接口返回的对象赋值给了数组tailors，但实际需要遍历的数组是x.data，这会导致tailors不是可遍历的数组，*ngFor无法正常工作。
2. 模板取值错误：模板中tailor.data.Name的写法不符合数据结构，数组中的每一项是单个裁缝对象，应该直接取tailor.Name。

修复步骤

1. 修正TypeScript赋值逻辑：

tailors: Tailors[] = [];

getTailors() {
  this.tailorService.getTailors().subscribe(x => {
    // 直接将接口返回的数组赋值给tailors
    this.tailors = x.data;
    console.log(x.data);
  });
} 

• 替换Object.assign为直接赋值，因为Object.assign用于对象合并，不适合数组赋值，直接赋值数组Angular才能检测到变化并更新视图。

2. 修正HTML模板取值：

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

额外提示

如果接口返回的x.data可能为空，建议初始化时或者赋值前做非空判断，避免视图报错，比如：

this.tailors = x.data || [];

内容的提问来源于stack exchange，提问作者BlackMamba