Angular中*ngFor正确用法及数据绑定报错解决方案

核心错误点 #

• 语法错误：*ngFor 为Angular结构型指令固定写法，现有代码中星号与ngFor之间存在多余空格，导致框架无法识别指令。
• 类型不匹配：定义的Colorway接口字段与API实际返回的colorways子项字段不一致，触发TypeScript类型校验报错。
• 遍历值无兜底：使用安全导航操作符?.访问imgSource.colorways时，接口响应完成前该值为undefined，*ngFor直接遍历undefined会触发运行时错误。

正确实现代码 #

1. 模板部分 #

如果需要展示缩略图地址和对应name字段，可直接使用以下写法，通过空数组兜底避免数据未加载时的遍历错误：

<div class="item-list" *ngFor="let item of imgSource?.colorways || []">
  <!-- 绑定thumbnail第0项为图片地址，name为图片说明/展示文本 -->
  <img [src]="item.thumbnail[0]" [alt]="item.name">
  <p class="item-name">{{ item.name }}</p>
</div>

也可以在外层加*ngIf判断数据存在后再渲染列表，效果一致：

<ng-container *ngIf="imgSource">
  <div class="item-list" *ngFor="let item of imgSource.colorways">
    <img [src]="item.thumbnail[0]" [alt]="item.name">
    <p class="item-name">{{ item.name }}</p>
  </div>
</ng-container>

2. 类型校验修复 #

要解决TS类型报错，可在接口请求返回后对数据做字段裁剪，只保留业务需要的字段，对齐你定义的Colorway接口：

// 接口请求逻辑示例
fetchData() {
  this.http.get<Pokedex>('你的业务接口地址').subscribe(res => {
    this.imgSource = {
      count: res.count,
      colorways: res.colorways.map(rawItem => ({
        id: rawItem.id,
        uuid: rawItem.uuid,
        name: rawItem.name,
        thumbnail: rawItem.thumbnail
      }))
    }
  })
}

如果业务中需要用到API返回的其余字段，直接把字段补到Colorway接口定义里即可。

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