两种方式的数据绑定在 Angular 9+ 中无法与 ng-select 一起使用答案

【问题标题】：Two way data binding is not working with ng-select in angular 9+两种方式的数据绑定在 Angular 9+ 中无法与 ng-select 一起使用
【发布时间】：2021-03-24 10:00:00
【问题描述】：

我正在开发一个 Angular 项目，我需要为 ng-select 下拉菜单分配一个默认值，但它不起作用，并且没有更新下拉列表的更改。

这里是代码。

模板代码

  <ng-select
  [items]="countries"
  class="text-capitalize"
  bindValue="id"
  [closeOnSelect]="true"
  [(ngModel)]="defaultCountry"
  [searchable]="true"
  (change)="changeCountry($event)"
  placeholder="{{
    _translate.currentLang == 'en'
      ? 'Country'
      : _translate.currentLang == 'ps'
      ? 'هیواد'
      : 'کشور'
  }}"
  [formControlName]="countryControlName"
>
  <ng-template ng-label-tmp let-item="item">
    {{
      _translate.currentLang == "en"
        ? item.label_en
        : _translate.currentLang == "ps"
        ? item.label_ps
        : item.label_fa
    }}
  </ng-template>
  <ng-template ng-option-tmp let-item="item">
    {{
      _translate.currentLang == "en"
        ? item.label_en
        : _translate.currentLang == "ps"
        ? item.label_ps
        : item.label_fa
    }}
  </ng-template>
</ng-select>

这是打字稿代码

defaultCountry:any;

 this.countries = [ {id: "1", label_en: "Afghanistan", label_ps: "افغانستان", label_fa: "افغانستان", value: "Afghanistan"},
 {id: "3", label_ps: "البانیا", label_fa: "البانیا", label_en: "Albania", value: "Albania"},
 {id: "3", label_ps: "الجزایر", label_fa: "الجزایر", label_en: "Algeria", value: "Algeria"}];


 this.defaultCountry = '1';

【问题讨论】：

标签： angular typescript data-binding

【解决方案1】：

也许一种解决方案是使用@ViewChild 来更新选择：

@Component({...})
export class MyComponent {
  @ViewChild(NgSelectComponent, {static: true}) selectCmp: NgSelectComponent;
  ngOnInit(){
    this.selectCmp.select({ value: '1' })
  }
}

【讨论】：

【解决方案2】：

也许你应该初始化 defaultCountry ：

defaultCountry: any = {};

【讨论】：

【解决方案3】：

哦，我的错！我终于设法解决了。我在 ng-select 下拉菜单中使用了双向绑定以及 formControlNames，这会阻止将默认值分配给输入字段。当我删除控件名称时，它确实起作用了。感谢您发布答案的努力。

【讨论】：