angular – md-autocomplete onSelectionChange两次射击

发布时间：2020-12-17 17:59:15 所属栏目：安全来源：网络整理

导读：我在我的Angular应用程序中使用md-autocomplete angular / material：2.0.0-beta.5.在最新版本中,所选方法已被onSelectionChange取代. 第一次选择下拉列表中的值时,关联的方法仅触发一次,但如果我从下拉列表中选择一个新值,则会选择两次(第二次具有前一个值)

我在我的Angular应用程序中使用md-autocomplete angular / material：2.0.0-beta.5.在最新版本中,所选方法已被onSelectionChange取代.

第一次选择下拉列表中的值时,关联的方法仅触发一次,但如果我从下拉列表中选择一个新值,则会选择两次(第二次具有前一个值).

逻辑与以前的版本一起正常工作.

模板

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

调节器

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

}

解决方法

正在发生的事情是onSelectionChange按顺序触发新选择的和未选择的选择.如果您将$event添加到您的通话中

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

然后,您可以通过查看此类源来检查它是否是所选的

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!