如何以编程方式为第三方NGSelect下拉组件设置默认选中值

NGSelect默认选中不生效解决方案 #

1. 数据源加载时序问题

绝大多数场景下失效是因为selectedId赋值早于items数据源初始化：比如items是从接口异步获取的，接口返回时间晚于ngOnInit执行，此时ng-select找不到对应Id的选项，自然不会渲染选中状态。

解决方法：

• 静态数据源场景，确保items初始化完成后再赋值选中值：

// 先初始化静态数据源
items = [
  { Id: '1', Name: 'US' , States:10},
  { Id: '2', Name: 'Japan', States:23},
  { Id: '3', Name: 'Australia', States:67}
];
selectedId!: string;

ngOnInit() {
  // 再赋值选中值
  this.selectedId = "3";
}

• 异步数据源场景，等接口返回赋值items后再设置选中值：

items: any[] = [];
selectedId!: string;

ngOnInit() {
  // 模拟接口请求获取下拉选项
  this.dataService.getOptionList().subscribe(res => {
    this.items = res;
    // 数据源赋值完成后再设置选中值
    this.selectedId = "3";
  })
}

2. 字段类型不匹配

检查items中Id字段的类型和selectedId的类型是否一致：如果items里的Id是数字3，给selectedId赋值字符串"3"会因为类型不匹配找不到对应选项，统一类型即可：

// Id为数字类型时对应赋值数字
this.selectedId = 3;

3. 手动调用组件方法兜底

如果时序问题不好调整，可以通过模板引用直接调用ng-select的选中方法：
首先给ng-select组件添加模板引用变量：

<ng-select
  #ngSelectRef
  class="custom"
  [items]="items"
  bindLabel="Name"
  bindValue="Id"
  [(ngModel)]="selectedId">
</ng-select>

TS中获取组件实例，数据源加载完成后手动触发选中：

import { ViewChild } from '@angular/core';
import { NgSelectComponent } from '@ng-select/ng-select';

export class YourComponent {
  @ViewChild('ngSelectRef') ngSelectRef!: NgSelectComponent;
  items: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getOptionList().subscribe(res => {
      this.items = res;
      // 手动匹配选中项
      const targetOption = this.items.find(item => item.Id === "3");
      this.ngSelectRef.select(targetOption);
    })
  }
}

4. 依赖模块检查

如果是首次使用组件，确认对应模块已经导入了必要依赖：

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他依赖模块
    NgSelectModule,
    FormsModule
  ]
})
export class YourModule { }

内容的提问来源于stack exchange，提问作者Learner