数据未进入 Angular Material 对话框答案

【问题标题】：Data not getting into Angular Material dialog数据未进入 Angular Material 对话框
【发布时间】：2020-05-17 08:48:46
【问题描述】：

我有一个简单的 Angular Material 对话框，它应该显示一些关于一个人的数据。我正在显示的人员对象如下：

export interface Person {
   prsName: string;
   prsAddress: string;
   prsCity: string;
   prsState: string;
}

对话框的 Typescript 代码如下：

@Component({
  selector: 'app-persondialog',
  templateUrl: './persondialog.component.html',
  styleUrls: ['./persondialog.component.css']
})
export class PersonDialogComponent {

  constructor(public dialogRef: MatDialogRef<PersonDialogComponent>,
          @Inject(MAT_DIALOG_DATA) public theInfo: Person) {
             alert('Name: '+theInfo.prsName); /*  temporary call to check the contents of theInfo */
          }

  onClose(): void {
    this.dialogRef.close();
 }

从我的主要组件调用的打开对话框的函数如下：

  public getPerson(aName: string) {
     const found = this.persGetter.findPerson(aName);

     found.subscribe(info => {
       alert('Person Name: ' + info.prsName + ' Address: ' + info.prsAddress); /* Temporary. This just shows that info has real data! */
       const ref = this.theDlg.open(PersonDialogComponent, {
         width: '300px',
         data: { theInfo: info }
       });
     });
   }

注意，persGetter 是一个 HttpClient 对象，它从我的服务器获取 Person 信息。

对话框的 HTML 如下：

<h1 mat-dialog-title>Person: {{ theInfo.prsName }}</h1>

<div mat-dialog-actions>
    <button mat-button (click)="onClose()">Close</button>
</div>

对话框在调用 getPerson() 函数时显示，但由于某种原因，在警报显示 info 内容和实际创建对话框之间，prsName 属性变为未定义！

显然我错过了一些东西。谁能告诉我如何将我的个人信息成功传递到此对话框中？

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

你应该把打开的代码改成这样：

   const ref = this.theDlg.open(PersonDialogComponent, {
     width: '300px',
     data: info
   });

为了更好的“记录”：

  constructor(
      public dialogRef: MatDialogRef<PersonDialogComponent>,
      @Inject(MAT_DIALOG_DATA) public theInfo: Person
  ) {
      console.info(JSON.stringify(theInfo, null, 4)); 
  }

【讨论】：

Marc：我知道正确使用控制台进行日志记录；不幸的是，我的环境存在控制台输出并不总是出现的问题，因此使用了临时警报框。不过，您的解决方案是最简单和最有效的，因此警报已从我的代码中删除。

【解决方案2】：

问题在于传递数据的方式的宽度。您需要将完整的数据作为 JSON 传递。有关更多详细信息，请参阅此link。 theInfo 是您的对象名称，而不是数据本身。

要传递对象数据，您需要修改对对话框的调用，如下所示

公共 getPerson(aName: string) { const found = this.persGetter.findPerson(aName);

 found.subscribe(info => {
   alert('Person Name: ' + info.prsName + ' Address: ' + info.prsAddress); /* Temporary. This just shows that info has real data! */
   const ref = this.theDlg.open(PersonDialogComponent, {
     width: '300px',
     data: { prsName: info.prsName }
   });
 });

}

这将根据需要将 Person 类型的对象传递给对话框。

【讨论】：

【解决方案3】：

您正在尝试访问错误的属性，

使用这个

 constructor(public dialogRef: MatDialogRef<PersonDialogComponent>,
          @Inject(MAT_DIALOG_DATA) public theInfo: any) {
             alert('Name: '+theInfo.theInfo.prsName); // as you are passing { theInfo: info }
          }

或者只传递信息而不是对象

constructor(public dialogRef: MatDialogRef<PersonDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public theInfo: Person) {
                 alert('Name: '+theInfo.prsName); // as you are passing info here
              }

const ref = this.theDlg.open(PersonDialogComponent, {
         width: '300px',
         data: info 
       });

【讨论】：