Angular中能否遍历对象？接口数据可打印但模板遍历报错

问题描述 #

从Swagger端点获取的数据可在控制台正常打印，但在模板中遍历展示属性时抛出错误，页面显示[object Object]。

组件TS代码 #

export class CompanyDialogComponent implements OnInit{

  taskpilot!: IGetTaskPilot[];

  constructor( private domainService: DomainService) {}
    ngOnInit(): void {
    
        this.domainService.getTaskPilot().subscribe({
            next:(response) => {
                this.taskpilot = response;
                console.log(response);
                return response;
            },
        });
    }
}

原始模板代码 #

<div *ngFor="let taskpilot of taskpilot">
    <div class="flex items-center px-5 my-3">
        <!-- <img [src]="mock_companies.img" width="20px" /> -->
        <span class="ml-4">
            <h2>{{ taskpilot.companies }}</h2>
        </span>
    </div>
</div>

问题原因 #

模板中*ngFor的循环变量与组件类中的数组变量同名（都是taskpilot），导致模板作用域内循环变量覆盖了组件类的数组变量，Angular无法正确识别要遍历的数组，进而将单个对象直接输出为[object Object]。

解决方案 #

1. 修改循环变量名称 #

将模板中的循环变量改为与数组变量不同的名称，比如item：

<div *ngFor="let item of taskpilot">
    <div class="flex items-center px-5 my-3">
        <!-- <img [src]="mock_companies.img" width="20px" /> -->
        <span class="ml-4">
            <h2>{{ item.companies }}</h2>
        </span>
    </div>
</div>

2. 优化数据加载状态处理（可选） #

由于数据是异步获取的，初始时taskpilot可能未赋值，可添加*ngIf避免空值报错，同时用可选链?.防止对象属性不存在的问题：

<div *ngIf="taskpilot">
    <div *ngFor="let item of taskpilot">
        <div class="flex items-center px-5 my-3">
            <!-- <img [src]="mock_companies.img" width="20px" /> -->
            <span class="ml-4">
                <h2>{{ item?.companies }}</h2>
            </span>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Wisdom John ikoi