Angular弹窗组件数据已传递但HTML列表未渲染问题

1. 变更检测未触发 #

如果数据是在组件初始化后异步赋值，或是直接修改数组内容而非替换引用，Angular可能无法自动检测到数据变化，导致模板不更新。

• 解决方法：
  • 手动触发变更检测：

    import { ChangeDetectorRef } from '@angular/core';
    
    constructor(private cdr: ChangeDetectorRef) {}
    
    ngOnInit() {
      this.dossiers = this.dialogRef.data.dossiers;
      this.cdr.detectChanges(); // 强制触发视图更新
    }
    

  • 替换数组引用触发变更：

    this.dossiers = [...this.dialogRef.data.dossiers]; // 创建新数组实例
    

2. 模板绑定存在错误 #

检查模板中的变量名、循环指令是否与组件逻辑匹配：

• 确认*ngFor绑定的变量名与组件内变量一致：

  <!-- 错误示例：变量名拼写错误 -->
  <ul>
    <li *ngFor="let item of dossier">{{item.name}}</li>
  </ul>
  <!-- 正确示例 -->
  <ul>
    <li *ngFor="let item of dossiers">{{item.name}}</li>
  </ul>
  

• 增加空值判断避免无效渲染：

  <ul *ngIf="dossiers?.length">
    <li *ngFor="let item of dossiers">{{item.name}}</li>
  </ul>
  <p *ngIf="!dossiers?.length">暂无数据</p>
  

3. 数据接收方式不正确 #

确保在弹窗组件中通过MAT_DIALOG_DATA正确注入数据：

import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';

export class DossiersListDialogComponent {
  dossiers: any[];

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    // 构造函数中直接接收数据，避免ngOnInit的延迟问题
    this.dossiers = data.dossiers;
  }
}

4. 异步数据加载时机问题 #

如果数据来自异步请求，需确保数据完全获取后再打开弹窗：

// 父组件逻辑
this.dossierApi.getDossiers().subscribe(dossiers => {
  this.dialog.open(DossiersListDialogComponent, {
    data: { dossiers: dossiers }
  });
});

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