本文介绍了如何使用angular5防止对话框在有角度的材质中打开两次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<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>
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}
});
}*
推荐答案
当选择变化事件通在每一个选项,因此得到了一个以上的事件.但是您在选择的一个事件中得到$event.source.selected
是true
.这样您就可以进行管理.
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.
您的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}
});
}
}
这篇关于如何使用angular5防止对话框在有角度的材质中打开两次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!