Angular中*ngFor循环无法遍历testRecords数据的问题求助

1. 确认testRecords的初始类型 #

组件中必须将testRecords初始化为数组，避免初始值为undefined或null导致*ngFor初始化失败：

// 组件类中声明
testRecords: { topic: string; subtopic: string; scores: any[] }[] = [];

2. 验证user.testRecords是否为真正的数组 #

Redux返回的数据可能是类数组对象（如带有length属性的普通对象），*ngFor仅支持可迭代的数组类型。在订阅回调中添加类型检查：

user$.subscribe(user => {     
  console.log('Is array?', Array.isArray(user.testRecords)); // 确认是否为true
  // 如果是类数组，转换为真正的数组
  this.testRecords = Array.isArray(user.testRecords) 
    ? user.testRecords 
    : Array.from(user.testRecords);
  console.log('TestRecordsComponent.testRecords', this.testRecords)
})

3. 检查变更检测策略 #

如果组件使用了ChangeDetectionStrategy.OnPush，Angular不会自动检测属性赋值的变化，此时有两种解决方式：

方式一：手动触发变更检测 #

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

constructor(private cdr: ChangeDetectorRef) {}

// 在subscribe赋值后调用
user$.subscribe(user => {     
  this.testRecords = user.testRecords;
  this.cdr.markForCheck(); // 通知Angular检测变更
})

方式二：直接在模板中使用async管道订阅Observable #

避免手动订阅，让Angular自动处理变更检测：

// 组件类中声明Observable
testRecords$: Observable<any[]>;

private subscribeToReduxStores = () => {
  this.testRecords$ = this.store.select(state => state.userState.testRecords);
}

模板修改为：

{{ testRecords$ | async }}
<div class="row mb-2" *ngFor="let testRecord of testRecords$ | async">
  <!-- 原有内容 -->
</div>

4. 检查模板语法与结构 #

• 确认*ngFor拼写正确（无大小写错误，如*NgFor）
• 确保没有*ngIf或其他结构指令意外隐藏了*ngFor所在的元素
• 临时简化模板做基础测试：

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

5. 验证Redux状态更新的时机 #

确认getUserTestRecords()触发的API请求完成后，Redux的userState.testRecords确实被正确更新为数组。可以通过Redux DevTools查看状态变化，确保更新后的testRecords是数组类型且包含正确数据。

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