Angular中*ngFor循环不更新，列表为空但长度显示正常如何解决

安全阿岳

2026-10-5

你遇到的问题核心原因大概率是*ngFor循环内的模板表达式抛出异常，导致渲染中断：<p>标签只读取了concerts.length属性，不会触发循环内的逻辑，因此可以正常显示，以下是逐步排查和修复方案：

第一步：排查模板运行时错误
打开浏览器开发者工具的控制台，查看是否存在JS报错，重点关注属性访问、方法调用相关的报错。你可以先简化模板验证，将*ngFor内的内容暂时修改为只输出基础字段，验证是否能正常渲染列表：

<li *ngFor="let concert of concerts">
  测试渲染：{{concert | json}}
</li>

如果能正常输出每个演唱会的JSON数据，说明问题出在原有模板调用的play_time方法上。

第二步：修复play_time方法的空值异常
play_time方法中直接调用了substr方法、访问description.organizer属性，只要任意一条演唱会数据存在start_time/end_time为空、description/organizer不存在的情况，就会抛出异常中断整个列表的渲染。你可以给方法加上空值防护：

play_time(concert: Concert): string {
  const startTime = concert?.start_time?.substr?.(0, 5) ?? '未设置';
  const endTime = concert?.end_time?.substr?.(0, 5) ?? '未设置';
  const organizer = concert?.description?.organizer ?? '未知主办方';
  return `${startTime} Uhr - ${endTime} Uhr | ${organizer}`;
}

第三步：手动触发变更检测（如果以上步骤无效）
如果组件设置了ChangeDetectionStrategy.OnPush策略，异步赋值后可能没有触发变更检测，可以手动注入ChangeDetectorRef触发更新：

// 导入依赖
import { ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-concerts',
  templateUrl: './concerts.component.html',
  styleUrls: ['./concerts.component.scss'],
})
export class ConcertsComponent implements OnInit {
  constructor(
    private _concertService: ConcertService,
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    this._concertService.upcoming().subscribe((data) => {
      this.concerts = data;
      // 手动触发变更检测
      this.cdr.detectChanges();
    });
  }
  // 其余代码不变
}

第四步：排查CSS样式问题
如果开发者工具的元素面板中可以看到<ul>下已经生成了对应的<li>节点，但是页面看不到，说明是CSS样式导致的，检查是否有给#gig-list或者子元素设置了display: none、opacity: 0、高度为0、溢出隐藏等规则。

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