数据未进入“角度材质”对话框

由 发布于 angulartypescriptangular-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（）函数时显示，但是由于某种原因，在警报显示信息内容的时间与实际创建对话框之间，prsName属性变为未定义！

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

评论
少黑
少黑

The problem is width the way you pass the data. You need to pass the complete data as a JSON. Refer this link for more details. theInfo is your object name and not the data itself.

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

公共getPerson（aName：字符串）{      找到const = 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类型的对象传递给对话框。

点赞
评论
櫻之舞
櫻之舞

您应该将打开代码更改为此：

   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)); 
  }
点赞
评论
Beck
Beck

您正在尝试访问错误的媒体资源，

用这个

 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 
       });
点赞
评论