md-autocomplete onSelectionChange a tiré deux fois

Question

J'utilise md-autocomplete angular/material: 2.0.0-beta.5 dans mon application angulaire. Avec la dernière version, la méthode selected a été remplacée par onSelectionChange.

La première fois qu'une valeur de la liste déroulante est sélectionnée, la méthode associée est déclenchée une seule fois, mais si je sélectionne une nouvelle valeur dans la liste déroulante, elle est sélectionnée deux fois (la deuxième fois ayant la valeur précédente).

La logique fonctionnait correctement avec la version précédente.

modèle

<md-autocomplete #panel="mdAutocomplete" [displayWith]="displayFn"> 
    <md-option (onSelectionChange)="selected(country)" *ngFor="let country of filteredCountries | async" [value]="country"> 
    <div class="selector-elements"> 
     <span> 
      <img [src]="getFlagPath(country.code)" [width]="24" [height]="24" /> 
     </span> {{ country.name }} 
     </div> 
</md-option> 

contrôleur

export class CountrySelector implements OnInit, ControlValueAccessor { 

// ... 

initCountries() { 
    this.countryList = countryNames; 

    this.filteredCountries = this.formControlName.valueChanges 
     .startWith(null) //-> OnInit the countries are filtered by null, hence all results are returned. 
     .map(country => { 
      return country && typeof country === 'object' ? country.name : country 
     }) 
     .map(name => name ? this.filter(name) : this.countryList.slice()); 
} 

filter(val: string): ICountry[] { 
    //Regex to match with the first letters of the country name with the passed value. 
    return this.countryList.filter(country => new RegExp(`^${val}`, 'gi').test(country.name)); 
} 

resetCountrySelection(){ 
    let country = new Country(); 
    this.formControlName.setValue(country); 
    this.propagateChange(country); 
} 

writeValue(country: Country): void { 
    if (country) { 
     this.formControlName.setValue(country); 
    } 
} 

selected(country: ICountry) { 
    // Here it gets triggered twice when a new element is chosen 
    this.propagateChange(country); 
} 

propagateChange = (_: any) => { }; 

registerOnChange(fn: any) { 
    this.propagateChange = fn; 
} 

} 

Answer 1

Ce qui se passe est feux OnSelectionChange à la fois pour le nouveau sélectionné, et étant non sélectionnés, dans cet ordre. Si vous ajoutez l'événement $ à votre appel comme si

(onSelectionChange)="selected($event, country)" 

vous pouvez vérifier si elle est celle sélectionnée en regardant la source comme ce bon point

selected(event: MdOptionSelectionChange, country: ICountry) { 
    if (event.source.selected) { 
     this.propagateChange(country); 
    } 
}