Angular中*ngFor遍历接口返回的DemandasList无数据显示问题求助

问题根因及排查方案 #

• 1. 接口返回结构不匹配
     你当前直接将接口返回的完整响应对象赋值给了用来遍历的DemandasList数组，从控制台输出可判断后端返回的是带外层包装的结构（如{code: xxx, msg: xxx, data: [需求列表数组]}），*ngFor仅支持遍历数组，赋值非数组内容时不会渲染任何内容。
     修改组件内refreshDemList方法，从返回结果中取出实际的数组字段即可：

refreshDemList() {
  this.service.getDemList().subscribe(data=> {
    // 按照后端实际返回的数组字段名修改，大部分场景下为data字段
    this.DemandasList = data.data;
    console.log(this.DemandasList);
  });
}

• 2. 字段名拼写错误
     确认后端返回的需求名称字段是否为demandaName，存在大小写、下划线拼写差异也会导致内容为空。你可以暂时修改模板代码，输出完整对象校验字段是否存在：

<div *ngFor="let item of DemandasList">
  {{item | json}}
</div>

如果上述代码可以输出每个对象的完整内容，说明遍历逻辑正常，仅需要调整模板里的字段名和后端返回一致即可。

• 3. 变更检测未触发
     少数场景下异步请求返回后Angular未触发视图更新，可以手动注入变更检测器强制更新视图：
     首先在组件中导入并注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(
  private service:DemandasService, 
  private modalService: NgbModal,
  private cdr: ChangeDetectorRef
) { }

赋值完成后调用检测方法：

refreshDemList() {
  this.service.getDemList().subscribe(data=> {
    this.DemandasList = data.data;
    this.cdr.detectChanges();
  });
}

• 4. 服务实例重复声明问题
     你的DemandasService已经设置了providedIn: 'root'全局单例，不需要在组件的providers数组中再次声明，重复声明会导致当前组件使用独立的服务实例，存在配置不一致的风险。

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