如何让多选ion-select始终保持至少一个选中项？

没问题，我来帮你搞定这个需求！要让多选的ion-select始终保留至少一个选中项，我们可以通过监听选中变化事件，在用户取消所有选项时自动恢复第一个选项的选中状态，具体实现步骤如下：

1. 优化初始选中逻辑（更规范的做法） #

你之前用[selected]="i==0"设置初始选中，其实可以直接通过绑定的ngModel赋值来实现，这样更符合Angular双向绑定的逻辑，避免模板和组件数据不一致的问题。在组件的初始化钩子（比如ngOnInit）或者获取到question数据后，设置初始值：

// 假设你已经获取到question和ind的对应值
if (question.IsMultiSelect && !this.macroValues[ind]) {
  // 多选模式下默认选中第一个选项
  this.macroValues[ind] = [question.PickListOptions[0]];
}

2. 添加选中变化事件监听 #

给ion-select添加ionChange事件，用来捕获用户的选中操作：

<ion-select 
  interface="popover" 
  class="note-select-list-documents" 
  [(ngModel)]="macroValues[ind]" 
  [multiple]="question.IsMultiSelect"
  (ionChange)="onSelectChange(ind, question)"
>
  <ion-option 
    *ngFor="let option of question.PickListOptions" 
    [value]="option"
  >
    {{option}}
  </ion-option>
</ion-select>

3. 实现事件处理函数 #

在组件类中编写onSelectChange方法，检查当前选中项是否为空，为空则自动选中第一个选项：

onSelectChange(index: number, question: any) {
  // 先判断选项列表是否为空，避免报错
  if (!question.PickListOptions || question.PickListOptions.length === 0) {
    return;
  }
  
  // 检查当前选中的值是否为空数组
  const selectedValues = this.macroValues[index];
  if (!selectedValues || selectedValues.length === 0) {
    // 自动恢复第一个选项的选中状态
    this.macroValues[index] = [question.PickListOptions[0]];
  }
}

为什么这个方案有效？ #

• ionChange会在用户每次修改选中项时触发，包括取消所有选项的操作；
• 当检测到选中数组为空时，直接修改macroValues[ind]的值，通过双向绑定[(ngModel)]，ion-select会自动同步更新选中状态；
• 初始值的设置保证了组件加载时就有默认选中项，和事件处理逻辑形成闭环，彻底杜绝“无选中项”的情况。

内容的提问来源于stack exchange，提问作者Setu Kumar Basak