Issue
I am using Angular Material Autocomplete as follows:
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="displayFn" autoActiveFirstOption>
<mat-option *ngFor="let option of filteredOptions$ | async" [value]="option" (onSelectionChange)="onSelectionChanged(option)" >
{{displayFn(option)}}
</mat-option>
</mat-autocomplete>
This is the handler:
onSelectionChanged(option) {
console.log('Selected ' + option.name);
}
For some reason onSelectionChanged()
gets called twice. The second time with the old value! I don't get why. What is happenning here?
Selecting item 1 and then item 2 and then item 3 will print:
> Selected item 1
> Selected item 2
> Selected item 1 // The unwanted call with the old value
> Selected item 3
> Selected item 2 // The unwanted call with the old value
Solution
material has optionSelected event you can use it
<mat-autocomplete #autocomplete="matAutocomplete" (optionSelected)="onSelectionChanged($event)" [displayWith]="displayFn" autoActiveFirstOption>
<mat-option *ngFor="let option of filteredOptions$ | async" [value]="option" >
{{displayFn(option)}}
</mat-option>
</mat-autocomplete>
and get your value that way
onSelectionChanged(event) {
console.log(event.option.value);
}
Answered By - Fateh Mohamed
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.