如何使用angular5防止對話框在有角度的材質中打開兩次

Question

    <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let person of filteredPersons | async" [value]="person.name" (onSelectionChange)="selectedPersonsInDialog(person)"> <img style="vertical-align:middle;" aria-hidden src="{{person.imgUrl}}" width="30" height="30" /> <span>{{ person.name }}</span> | <small>ID: {{person.id}}</small> </mat-option> </mat-autocomplete>
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let person of filteredPersons |  async" [value]="person.name"(onSelectionChange)="selectedPersonsInDialog(person)">
          {{person}}  
          </mat-option>  
        </mat-autocomplete>

這是我在組件類中的方法：-實際上，selectedPersonsInDialog函數被調用兩次，因此，它總是顯示2次對話框，其中最新選擇的值和一個先前選擇的值。

I want to display a dialog only once with latest value selected.

selectedPersonsInDialog(person){
 this.selectedPerson=person;
alert(this.selectedPerson); 
 let dialogRef = this.dialog.open(AddListOfPersonDialog, {
      width: '500px',
      data: { person:this.selectedPerson}
    });
  }*

Answer 1

當選擇更改事件傳遞給每個選項時，則發生了一個以上的事件。 但是您在選擇的一個事件中獲得了$event.source.selected為true 。 這樣您就可以管理它。

您的html應該像

<mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let person of filteredPersons | async" [value]="person.name"
                            (onSelectionChange)="selectedPersonsInDialog($event.source.selected,person)">
                    <img style="vertical-align:middle;" aria-hidden  src="{{person.imgUrl}}" width="30" height="30"/>
                    <span>{{ person.name }}</span>
                    <small>ID: {{person.id}}</small>
                </mat-option>
            </mat-autocomplete>
            <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let person of filteredPersons |  async" [value]="person.name"
                        (onSelectionChange)="selectedPersonsInDialog($event.source.selected,person)">
                {{person}}
             </mat-option>
        </mat-autocomplete>

你的組件功能應該像

selectedPersonsInDialog(isSelected: boolean,person){
if(isSelected){
   this.selectedPerson=person;
   alert(this.selectedPerson); 
   let dialogRef = this.dialog.open(AddListOfPersonDialog, {
      width: '500px',
      data: { person:this.selectedPerson}
    });
  }
}