Mat Dialog pass 数组答案

【问题标题】：Mat Dialog pass arrayMat Dialog pass 数组
【发布时间】：2021-03-04 02:47:33
【问题描述】：

当用户单击按钮以显示信息时，它会打开 mat 对话框。但是弹窗是空白的，数据没有通过。

<form [formGroup]="userForm">
        <input type="text" formControlName="name" placeholder="Name" />
        <button class="ghost" (click)=onSubmit()>Click</button>
</form>

export class LoginComponent implements OnInit {

    data: User[] = [];
    
    constructor(private dialog: MatDialog) { }
    
    onSubmit() {
    this.registerService.getUser(this.name).subscribe((response: Array<User>) => {
      this.data = response;
    });
    
    return this.dialog.open(PopupRegisterComponent, {
      disableClose: true,
      autoFocus:true,
      data: this.data,
    });
}

export class PopupRegisterComponent implements OnInit {

  constructor(@Inject(MAT_DIALOG_DATA) public data: User) { }

  ngOnInit() {
    console.log( this.data.name );
    console.log( this.data);
  }
}

【问题讨论】：

标签： angular mat-dialog

【解决方案1】：

Subscribe 是异步的，所以你需要在里面打开你的对话框：

onSubmit() {
  this.registerService.getUser(this.name).subscribe((response: Array<User>) => {
    this.data = response;
    
    // this.data isn't required here of course, depending on if you use these data elsewhere
    this.dialog.open(PopupRegisterComponent, {
      disableClose: true,
      autoFocus:true,
      data: this.data,
    });
});

您也不需要退货。除非您正在使用对话框 ref 进行处理，但我不这么认为。

【讨论】：