Angular如何渲染数据库数据到卡片？卡片空白无数据如何解决

核心错误 #

你对接口返回数据做字段映射时，修改了字段命名，但模板仍在调用不存在的字段：

• TS代码中Getsouscatégorie方法的map逻辑里，你将原实体的id赋值给新字段value，原实体的libelle赋值给新字段label，最终生成的listSousCategorie数组的每个元素只有value和label两个字段
• 但HTML模板中你用{{i.libelle}}取值，libelle字段在映射后的数组中不存在，因此渲染为空。

解决办法（二选一即可） #

方案1：修改模板字段名 #

将HTML中对应行改为：

<p>{{i.label}}</p>

方案2：修改TS中的数据映射逻辑 #

保留原字段名，修改map回调的返回字段：

Getsouscatégorie(){
  this.ExamenSouCategorieService.findAll().then((res)=>{
    this.listSousCategorie = res.map(function (obj:any) {
      return {
        id: obj.id,
        libelle: obj.libelle
        // 如需其他实体字段可在此处追加
      };
    });
  });
}

其他可选排查点 #

• 先在findAll的then回调中添加console.log(res)，确认接口是否正常返回了非空的libelle字段数据
• 如果接口返回正常但仍不渲染，可引入Angular的NgZone手动触发变更检测，包裹赋值逻辑即可：

// 先在构造函数注入NgZone
constructor(private ngZone: NgZone) {}
// 赋值时包裹
this.ngZone.run(() => {
  this.listSousCategorie = res.map(/* 原有映射逻辑 */)
})

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