angular - Varför kallas onSelectionChange två gånger?

Jag använder Angular Material Autocomplete på följande sätt:

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

Det här är handteraren:

onSelectionChanged(option) {
  console.log('Selected ' + option.name);
}

Av någon anledning blir onSelectionChanged() kallad två gånger. Den andra gången med det gamla värdet! Jag förstår inte varför. Vad händer här?

Att välja objekt 1 och sedan objekt 2 och sedan objekt 3 kommer att skriva ut:

> 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

Svar #1

Jag stod inför samma problem för ett mat-alternativ inuti en mat-välj och fixade det på detta sätt:

Mall

<mat-select>
 <mat-option (onSelectionChange)="handleMetaSignalChange(metaSignal.name,$event);" *ngFor="let metaSignal of metaSignals" [value]="metaSignal">
  {{ metaSignal.name }}
 </mat-option>
</mat-select>

Kod

 handleMetaSignalChange(metaSignal: string, event: any) {
    if (event.isUserInput) {    // ignore on deselection of the previous option
      console.log('Meta Signal Changed to ' + metaSignal + event.isUserInput);
    }
 }

Svar #2

material har eventet optionSelected som du kan använda

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

och få ditt värde på det sättet

onSelectionChanged(event) {
   console.log(event.option.value);
}

Svar #3

Om du behöver få hela OBJEKTET och använda dess barnvärden i komponenten:

1- Skicka både object och $event från DOM till component.ts.

<!-- Printing out the country name and flag only -->

 <mat-autocomplete #auto="matAutocomplete">
   <mat-option 
      *ngFor="let country of filteredCountries$ | async" 
      [value]="country.name"
      (onSelectionChange)="getSelectedCountry(country, $event)">
      <img class="example-option-img" aria-hidden [src]="country.flag" height="25">
      <span>{{country.name}}</span>
   </mat-option>
 </mat-autocomplete>

2- Uppdatera nu dina värden i component.ts

getSelectedCountry(country: ICountry, event: any): void {
   if (event.isUserInput) {    // ignore on deselection of the previous option
     console.log("Selected country name: ", country.name);
     console.log("Selected country code: ", country.code);
     console.log("Selected country flag link: ", country.flag);
}

Obs: ICountry är mitt landgränssnitt som inte behöver finnas.

Relaterade artiklar