无法向mat-dialog传递数据，访问传入对象属性显示undefined如何解决？

问题根因 #

你向mat-dialog传递的data是嵌套结构：外层是包含person属性的对象，而对话框中注入的MAT_DIALOG_DATA对应的就是这个外层对象，你直接把外层对象赋值给了名为person的变量，访问属性时缺失了一层嵌套所以返回undefined。
控制台打印完整对象时能看到所有属性，是因为浏览器控制台输出的是对象的引用，点击展开时才会读取对象的最新完整结构，和实际代码执行时的层级访问逻辑不一样。

解决方案 #

方案1：调整属性访问层级 #

直接按嵌套结构访问属性即可，修改对话框组件的取值代码：

constructor(private _formBuilder: FormBuilder,
            @Inject(MAT_DIALOG_DATA) private person: any
            ) { 
                console.log(this.person); 
                console.log(this.person.person.name); // 增加一层person层级即可拿到值             
              }

方案2：简化传递的数据结构 #

修改主组件的传值逻辑，去掉多余的嵌套层，直接把用户信息作为data的内容：

EditDialog(nameInput: String, emailInput: String) {
    const dialogInstance = this.dialog.open(EditDialogComponent,
      {
        width: "40%",
        disableClose: true,
        data: {name: nameInput, email: emailInput } // 去掉外层的person包裹
      }      
      );
  }

修改后原有的this.person.name可正常取值。

方案3：注入时直接解构取值 #

修改对话框组件的注入代码，直接从MAT_DIALOG_DATA中解构出内层的person对象：

constructor(private _formBuilder: FormBuilder,
            @Inject(MAT_DIALOG_DATA) private { person }: any
            ) { 
                console.log(person); 
                console.log(person.name); // 直接访问解构后的对象属性即可         
              }

内容的提问来源于stack exchange，提问作者Andrés