双向数据绑定不适用于 angular 9+ 中的 ng-select

Question

我正在做一个 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';

Answer 1

也许一种解决方案是使用 @ViewChild 更新 select:

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

Answer 2

也许你应该初始化 defaultCountry :

defaultCountry: any = {};

Answer 3

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

双向数据绑定不适用于 angular 9+ 中的 ng-select

Two way data binding is not working with ng-select in angular 9+

data-binding

typescript

angular