Материал Модал необычного поведения

Question

введите описание изображения здесь Я использую угловой материал, и приведенный ниже код является модальным.Проблема в том, что когда я нажимаю кнопку Отмена , getSelectedCommittees также выполняется.

<div fxLayout="direction" fxLayoutAlign="center center">
<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="getSelectedCommittees()">OK</button>
<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="true"> Cancel </button>

Я не могу понять, почему это происходит.Кто-нибудь может мне помочь в этом ??

Заранее спасибо

Answer 1

Проблема в [mat-dialog-close]="getSelectedCommittees()".

Вот альтернативный HTML-файл

<div fxLayout="direction" fxLayoutAlign="center center">
<button mat-button class="act-button outline modal-blue-outline" 
(click)="getSelectedCommittees()">OK</button>
<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="true"> Cancel </button>

TS-файл

getSelectedCommittess() {
    // Things you want to perform
    // etc etc 

    this.dialogRef.close(); // this method will close the dialog or model
                            // after your operations where dialogRef is 
                            // the name of your reference variable
  }

Для справки https://material.angular.io/components/dialog/api

Answer 2

Как говорят Официальный документ диалога ,
, что "Кнопка, закрывающая текущий диалог" .
И его входное свойство для компонента диалога, как указано в @Input('mat-dialog-close')

mat-dialog-close, будет всегда закрывать диалоговое окно, если оно щелкнуло, независимо от того, какое значение вы ему присвоите.Если вы хотите контролировать логику закрытия, сделайте это с (click)="seeIfCloseableOrNot()".
mat-dialog-close является атрибутом, и он будет выполнять свою работу, над которой его добавили, а функциональность mat-dialog-close заключается в закрытии диалога.

Вы можете использовать значение, присвоенное mat-dialog-close, используяdialogRef.afterClosed()
Также см .: https://github.com/angular/material2/issues/9298
, так как присоединение какого-либо метода к mat-dialog-close вызовет его много раз из-за обнаружения изменений.

См. Демонстрацию с несколькими вызовамифункции, связанной с matDialogClose

Answer 3

Заменить:

<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="getSelectedCommittees()">OK</button>

По:

<button mat-button
    type="submit" 
    (click)="getSelectedCommittees()"
    class="act-button outline modal-blue-outline">
    OK
</button>

И вы можете закрыть диалоговое окно в вашей getSelectedCommittes функции:

getSelectedCommittess() {
    // Some code...

    this.dialogRef.close();
}