如何使用angular5防止对话框在角材料中打开两次 [英] How to prevent Dialog opening twice in angular material using angular5

问题描述

 <mat-option *ngFor="让过滤人员的人| 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="让过滤人员的人| async" [value]="person.name"(onSelectionChange)="selectedPersonsInDialog(person)">{{人}}</mat-option></mat-autocomplete>

<块引用>

这是我在组件类中的方法:- 实际上selectedPersonsInDialog 函数被调用两次，所以总是它显示 2 次对话框，其中最新选择和一个先前选择价值.

我想只显示一次选择最新值的对话框.selectedPersonsInDialog(人){this.selectedPerson=人；警报(this.selectedPerson)；让 dialogRef = this.dialog.open(AddListOfPersonDialog, {宽度:'500px'，数据:{person:this.selectedPerson}});}*

解决方案

when selection change event pass in every option, so got more then one event.但是在您选择的一个事件中，$event.source.selected 是 true.所以你可以管理它.

你的 html 应该是这样的

<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="让filteredPersons的人| async" [value]="person.name"(onSelectionChange)="selectedPersonsInDialog($event.source.selected,person)">{{人}}</mat-option></mat-autocomplete>

你的组件功能应该是这样的

selectedPersonsInDialog(isSelected: boolean,person){如果(被选中){this.selectedPerson=人；警报(this.selectedPerson)；让 dialogRef = this.dialog.open(AddListOfPersonDialog, {宽度:'500px'，数据:{person:this.selectedPerson}});}}

    <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>

This is my method in the component class:- Actually selectedPersonsInDialog function is being called twice so, always it displays 2 times dialog with latest selected and one previous selected value.

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}
    });
  }*

解决方案

when selection change event pass in every option, so got more then one event. but you got $event.source.selected is true in one event which is you selected. so you can manage it.

your html should be like

<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>

your component function should be like

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

这篇关于如何使用angular5防止对话框在角材料中打开两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！