Angular MatDialog传递数组时弹窗空白、数据未成功传递问题

核心错误定位 #

原有实现存在两个逻辑问题，直接导致数据传递失败、弹窗内容空白：

• 异步执行时序错位：registerService.getUser()是异步HTTP请求，原代码在发起请求后未等待响应返回，就直接执行弹窗打开逻辑，此时传入弹窗的data还是组件初始化的空数组[]；等接口成功返回给this.data赋值时，弹窗早已完成初始化，无法更新已经传入的静态数据。
• 数据类型不匹配：父组件传入弹窗的是User[]类型的数组，但弹窗组件内通过MAT_DIALOG_DATA注入数据时，将类型定义为单个User，即便数据正常传入，读取this.data.name时也会因数组对象无name属性得到空值，最终渲染空白。

修正方案 #

1. 调整代码执行顺序：将弹窗打开逻辑移入接口请求的成功回调内部，确保拿到完整响应数据后再触发弹窗，直接把请求返回的数组作为参数传入。
2. 统一数据结构类型：将弹窗组件内注入的MAT_DIALOG_DATA类型修改为与传入值一致的User[]，读取数组内元素属性时通过索引取值，避免属性读取异常。

修正后代码 #

父组件（LoginComponent） #

onSubmit() {
  this.registerService.getUser(this.name).subscribe((response: Array<User>) => {
    // 接口返回成功，先把响应赋值给data
    this.data = response;
    // 拿到有效数据后再打开弹窗，传入当前的用户数组
    this.dialog.open(PopupRegisterComponent, {
      disableClose: true,
      autoFocus: true,
      data: this.data
    });
  });
}

弹窗组件（PopupRegisterComponent） #

// 修正注入数据的类型为User数组，与父组件传入结构匹配
constructor(@Inject(MAT_DIALOG_DATA) public data: User[]) { }

ngOnInit() {
  // 数组场景下读取单个用户属性需先取对应索引的元素
  console.log(this.data[0]?.name);
  console.log(this.data);
}

补充注意点 #

• 若接口请求存在失败场景，建议在订阅的错误回调中增加异常处理逻辑，请求失败时不触发弹窗打开，避免传入空值导致的渲染异常。
• 模板内渲染数组内容时，可通过*ngFor遍历data数组完成列表渲染，无需强行读取数组本身的属性。

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