MatDialog：如何输出多个值？

Question

我有一个包含 2 个输入字段的对话框。提交表单后，我想显示它们的值。所以这些值应该保存在对象 myData.

中

这就是我想向他们展示的方式：

<button mat-raised-button (click)="openDialog()">Pick one</button>
<div *ngIf="animal">
  <p>Favorite Animal: <i>{{myData.animal}}</i></p>
  <p>Favorite Fruit: <i>{{myData.fruit}}</i></p>
</div>

这就是我努力实现目标的方式。这是完全错误的，但我希望它描述了我正在尝试做的事情。

<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field appearance="fill">
    <mat-label>Favorite Animal</mat-label>
    <input matInput [(ngModel)]="data">
  </mat-form-field>
  <p>What's your favorite fruit?</p>
  <mat-form-field appearance="fill">
    <mat-label>Favorite Fruit</mat-label>
    <input matInput [(ngModel)]="data">
</mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
</div>

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

export interface DialogData {
  animal: string;
  fruit: string
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
})
export class DialogOverviewExample {
  myData: DialogData;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px'    
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.myData.animal = result;
      this.myData.fruit = result; // I know that it makes no sense :)
    });
  }
}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData,
  ) {}

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

查看 StackBlitz

上的代码

Answer 1

您可以通过从对话框返回对象来完成。

html

              :
    <input matInput [(ngModel)]="data.animal">
              :
    <input matInput [(ngModel)]="data.fruit">
              :

ts

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

export interface DialogData {
  animal: string;
  fruit: string
}

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html',
})
export class DialogOverviewExample {
  myData: DialogData;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px'    
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      if (result != null) {
        this.myData.animal = result.animal;
        this.myData.fruit = result.fruit;
      }
    });
  }
}

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
  public data: DialogData = {animal: '', fruit: ''};

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
  ) {}

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

Answer 2

将 myData: DialogData; 替换为：

myData: DialogData = {
  animal: '',
  fruit: ''
}

两个 ngModel 不应该只有 data。他们应该是：

<input matInput [(ngModel)]="data.animal">
<input matInput [(ngModel)]="data.fruit">

此外，您应该将正确的值传递给 subscribe() 方法中的对象。它应该看起来像这样：

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  this.myData.animal = result.animal;
  this.myData.fruit = result.fruit;
});

您的代码中最后缺少的是 data 对象，它应该在您的 open() 方法中。那应该是这样的：

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {animal: this.myData.animal, fruit: this.myData.fruit}
});

MatDialog：如何输出多个值？

MatDialog: How to output multiple values?

angular-material

angular