Angular Material Dialog无法动态更新数据问题咨询

问题原因 #

1. ngOnChanges生命周期会在组件初始化、每个@Input属性变更时都触发，你第一次触发该钩子时还没调用handleClick打开弹窗，dialogRef自然未赋值，打印undefined属于正常情况。
2. MAT_DIALOG_DATA是一次性注入的静态值，你直接修改dialogRef.componentInstance.data时，弹窗组件内部默认不会触发变更检测，模板不会同步更新。
3. 你的代码存在笔误：ngOnChanges中赋值的warehouseID在组件内不存在，实际属性名是warehouseStackID。

最小改动修复方案 #

1. 调整WarehouseStackComponent的ngOnChanges逻辑

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

// ...其他代码保持不变
ngOnChanges(changes: SimpleChanges): void {
  // 只在pallets真实变更、且弹窗已打开时执行更新，跳过首次初始化触发
  if (changes['pallets'] && !changes['pallets'].firstChange && this.dialogRef?.componentInstance) {
    this.dialogRef.componentInstance.data = {
      warehouseStackID: this.warehouseStackID, // 修复变量名笔误
      pallets: this.pallets
    };
    // 手动触发弹窗组件变更检测，保证模板更新
    this.dialogRef.componentInstance.cdr.detectChanges();
  }
}

2. 给弹窗组件注入变更检测器

修改StackPalletsComponent.ts，注入ChangeDetectorRef供父组件调用：

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

// ...其他代码保持不变
constructor(
  public mainService:MainServiceService, 
  public dialogRef:MatDialogRef<StackPalletsComponent>, 
  public dialog:MatDialog,
  @Inject(MAT_DIALOG_DATA) public data: {warehouseStackID: number, pallets: Pallet[]},
  public cdr: ChangeDetectorRef // 新增变更检测器
) { }

更规范的响应式方案（推荐） #

避免手动控制变更检测，后续维护更简单：

1. 弹窗组件改用响应式流存数据

修改StackPalletsComponent.ts：

import { BehaviorSubject } from 'rxjs';

export class StackPalletsComponent implements OnInit {
  // 用响应式流存托盘列表
  public pallets$ = new BehaviorSubject<Pallet[]>([]);

  constructor(
    public mainService:MainServiceService, 
    public dialogRef:MatDialogRef<StackPalletsComponent>, 
    public dialog:MatDialog,
    @Inject(MAT_DIALOG_DATA) public data: {warehouseStackID: number, pallets: Pallet[]}
  ) { 
    // 初始化赋值
    this.pallets$.next(data.pallets);
  }
}

2. 弹窗模板改用async管道订阅

修改StackPalletsComponent.html中托盘列表部分：

<app-pallet *ngFor="let pallet of pallets$ | async" [position]="{x:pallet.positionX, y:pallet.positionY}" [pallet]="pallet"></app-pallet>

3. 父组件直接推新值到响应式流

修改WarehouseStackComponent的ngOnChanges：

ngOnChanges(changes: SimpleChanges): void {
  if (changes['pallets'] && !changes['pallets'].firstChange && this.dialogRef?.componentInstance) {
    this.dialogRef.componentInstance.pallets$.next(this.pallets);
  }
}

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