Angular MatDialog中*ngFor循环不渲染列表内容该如何处理？

首先明确：*ngFor完全可以在MatDialog内正常使用，你遇到的渲染失败问题和MatDialog本身无关，是变更检测触发异常或数组绑定逻辑问题导致的。

问题根因 #

你可以直接读取linkedNotes[2]渲染成功，说明数组最终确实被正确赋值到组件属性，但*ngFor没有触发重渲染，通常是以下两种情况：

1. 组件启用了ChangeDetectionStrategy.OnPush变更检测策略，你给linkedNotes赋值时没有更新数组的引用，或者赋值操作发生在Angular的 Zone 上下文之外
2. 给MatDialog传递数据/弹窗内部接收数据的逻辑存在时序问题，*ngFor首次执行时数组为空，后续数组更新后没有触发重渲染

修复方案 #

• 方案1：更新数组时更换引用
  如果之前是通过push、splice等方法修改原数组，改成重新生成新数组赋值，触发ngFor的变化检测：

  // 错误写法（修改原数组引用不变，OnPush模式下检测不到变化）
  this.linkedNotes.push(...res);
  // 正确写法（生成新数组，引用变更）
  this.linkedNotes = [...this.linkedNotes, ...res];
  

• 方案2：手动触发变更检测
  在组件中注入ChangeDetectorRef，数组赋值完成后手动通知Angular检测变更：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 数组赋值逻辑
  getLinkedNotes() {
    this.noteService.getLinkedList().subscribe(res => {
      this.linkedNotes = res;
      // 手动标记当前组件需要检测变更
      this.cdr.markForCheck();
    })
  }
  

• 方案3：检查MatDialog数据传递逻辑
  确认你打开弹窗时数据已经完成赋值，且弹窗内部正确接收：
  打开弹窗的代码：

  const dialogRef = this.dialog.open(NoteDialogComponent, {
    data: { linkedNotes: this.linkedNotes } // 传递前确认this.linkedNotes已经有值
  })
  

  弹窗内部接收数据的代码：

  import { MAT_DIALOG_DATA } from '@angular/material/dialog';
  import { Inject } from '@angular/core';
  
  constructor(@Inject(MAT_DIALOG_DATA) public data: {linkedNotes: any[]}) {
    // 如果模板直接绑定linkedNotes，需要手动赋值
    this.linkedNotes = data.linkedNotes;
  }
  

• 方案4：给*ngFor添加trackBy优化
  避免ngFor全量重渲染，同时提升循环稳定性：
  模板代码调整为：

  <div *ngFor="let linkedNote of linkedNotes; let i = index; trackBy: trackByNoteId">
    <h6>{{linkedNote.userName}}</h6>
  </div>
  

  组件中添加trackBy方法：

  trackByNoteId(index: number, note: any) {
    // 优先用笔记的唯一ID作为追踪标识，没有则用索引
    return note.id ?? index;
  }
  

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