如何为ng-select设置初始值，点击清除后自动选中首个选项

核心逻辑为监听ng-select的清空操作，在选中值被清空时自动将第一个选项赋值给绑定变量。

步骤1：修改模板代码 #

在原有ng-select标签上新增clear事件绑定，监听用户点击清除按钮的操作：

<ng-select class="" [items]="assigneeStatus" name="status_filter_id"
           bindLabel="lookup_label" bindValue="com_lookup_id" placeholder="Assignee Status"
           [(ngModel)]="searchAssigneeObj.status_filter_id" [hideSelected]="true"
           (clear)="onStatusClear()"
           #status_filter_id="ngModel">
    <ng-template ng-label-tmp let-item="item">
        <span>{{item.lookup_label ||  'All'}}</span>
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-search="searchTerm"
                 let-index="index">
        <span>{{item.lookup_label || ''}}</span>
    </ng-template>
</ng-select>

步骤2：补充组件逻辑 #

在对应的.component.ts文件中添加事件处理方法：

onStatusClear() {
  // 先判断选项列表是否非空，避免数组越界报错
  if (this.assigneeStatus?.length) {
    // 因为bindValue绑定的是com_lookup_id，直接取第一个选项的对应属性赋值即可
    this.searchAssigneeObj.status_filter_id = this.assigneeStatus[0].com_lookup_id;
  }
}

扩展兼容场景 #

如果需要覆盖所有导致选中值清空的场景（比如代码手动赋值为空、其他联动逻辑清空值），可以替换为监听ngModelChange事件：

1. 模板中调整事件绑定：

<!-- 把clear事件替换为ngModelChange事件 -->
(ngModelChange)="onStatusChange($event)"

2. ts中补充对应方法：

onStatusChange(currentValue) {
  // 仅当选中值为空、且选项列表非空时自动赋值
  if (currentValue == null && this.assigneeStatus?.length) {
    this.searchAssigneeObj.status_filter_id = this.assigneeStatus[0].com_lookup_id;
  }
}

该方案不会触发死循环，因为赋值后选中值不再为null，不会重复进入判断逻辑。

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