Question

我正在关注here中的文档。我可以将数据传递给对话框，但我没有从中获取数据。我在.afterClose（）。subscribe（）上获得了未定义的结果。我错过了什么？我猜我在对话框的模板中需要做些什么但是上面的文档没有提供它的例子。这是我的代码：

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

import {MySavior} from '../shared/my-savior';
import {Savior} from '../../savior/shared/savior';
import {SaviorDataService} from '../../savior/shared/savior-data.service';

@Component({
  selector: 'app-my-room-savior-select-dialog',
  template: 'my data name: {{data.name}}'
})
export class MySaviorSelectDialogComponent {
  constructor(public dialogRef: MatDialogRef<MySaviorSelectDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

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


@Component({
  selector: 'app-my-room-my-savior',
  templateUrl: './my-savior.component.html',
  styleUrls: ['./my-savior.component.css']
})
export class MySaviorComponent implements OnInit {

  saviors: Savior[] = [];
  mySaviors: MySavior[] = [];

  constructor(private saviorDataServ: SaviorDataService, public dialog: MatDialog) {}

  ngOnInit() {
    ...
  }

  openSelectDialog(): void {
    const dialogRef = this.dialog.open(MySaviorSelectDialogComponent, {data: {name: 'test'}});
    dialogRef.afterClosed().subscribe(result => {
      console.log('result ' + result); //i got result undefined 
    });
  }

}

Answer 1

我注意到我们可以在MatDialogRef.close（）上传递数据后想出来。

mysql> SELECT * FROM `orderbook` WHERE (`order_to` IN ('49,6'));
+----+----------+
| id | order_to |
+----+----------+
|  3 |       49 |
+----+----------+
1 row in set, 1 warning (0,00 sec)

mysql> show warnings;
+---------+------+------------------------------------------+
| Level   | Code | Message                                  |
+---------+------+------------------------------------------+
| Warning | 1292 | Truncated incorrect DOUBLE value: '49,6' |
+---------+------+------------------------------------------+
1 row in set (0,00 sec)

mysql> select cast('49,6' as unsigned);
+--------------------------+
| cast('49,6' as unsigned) |
+--------------------------+
|                       49 |
+--------------------------+
1 row in set, 1 warning (0,01 sec)

mysql> show warnings;
+---------+------+-------------------------------------------+
| Level   | Code | Message                                   |
+---------+------+-------------------------------------------+
| Warning | 1292 | Truncated incorrect INTEGER value: '49,6' |
+---------+------+-------------------------------------------+
1 row in set (0,00 sec)

该文档仅提供onNoClick（）函数，顺便说一下，它不需要传递任何数据。另一方面，onOkClick（），我认为应该或多或少像上面的onClose（）。我不知道他们为什么不把它包含在文档中。

Answer 2

@Component({ 
  selector: 'app-my-room-savior-select-dialog', 
  template: 'my data name: {{data.name}}' 
}) 

export class MySaviorSelectDialogComponent implements OnInit {

  name: string;

  constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) 
   public data) {}

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

Answer 3

如果您想根据关闭对话框的方式返回数据，还有另一种方法，例如如果您的对话框中有一个“保存”按钮，并且不想在您以“取消”按钮等其他方式关闭它时保存，单击外部或按 Esc：

来自文档：

<块引用>

mat-dialog-close [Attr] 添加到 a ，使按钮关闭带有来自绑定值的可选结果的对话框。

所以在 MySaviorSelectDialogComponent HTML 标记中使用

<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="data">Save</button>

使“取消”返回空值，“保存”返回数据属性。

如何从MatDialog获取数据？

3 个答案: