Ionic中ion-searchbar搜索时保持勾选项选中状态的问题

嘿，我仔细看了你的代码，核心问题其实就俩：一是复选框没和已勾选的数据绑定选中状态，二是搜索逻辑里的列表处理有点乱，导致要么丢状态要么列表显示不对。下面一步步给你修正：

1. 先让复选框“记住”选中状态 #

你已经把已勾选的食物存在tickedFoods里了，但HTML里的ion-checkbox根本不知道这个数组的存在，所以得给它加个[checked]绑定，判断当前食物是不是在已勾选列表里：

修改HTML里的列表部分：

<ion-list *ngFor="let food of foods">
  <ion-item (ionChange)="onCheckbox($event, food)">
    <ion-label>{{ food.name }}</ion-label>
    <!-- 这里加[checked]绑定，用辅助方法判断是否已勾选 -->
    <ion-checkbox slot="end" [value]="food.name" [checked]="isFoodTicked(food.name)">
    </ion-checkbox>
  </ion-item>
</ion-list>

然后在TS里加个简单的辅助方法，用来做判断：

// 判断某个食物是否已被勾选
isFoodTicked(foodName: string): boolean {
  return this.tickedFoods.some(food => food.name === foodName);
}

2. 修正搜索逻辑，满足“保留全部食物列表”的需求 #

你原代码的搜索逻辑有点问题，比如清空搜索框时会把foods改成tickedFoods，这就导致只显示已勾选的项了，完全不符合你要保留全部列表的需求。我给你两种方案选：

方案A：搜索时过滤列表，但已勾选项无论匹配与否都保留 #

如果你的需求是“搜索时显示匹配的项，但已勾选的项哪怕不匹配也得显示出来”，用这个逻辑：

// 注意：HTML里的事件是onSearchFood，你原TS里写的是onSearchIntolerance，要改过来！
onSearchFood(event) {
  this.searchQuery = event.detail.value?.trim() || '';
  
  if (this.searchQuery) {
    // 先找出匹配搜索词的食物
    const matchedFoods = this.allFoods.filter(term => 
      term.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
    // 再找出已勾选但不匹配搜索词的食物，避免被过滤掉
    const tickedNonMatched = this.tickedFoods.filter(food => 
      !matchedFoods.some(m => m.name === food.name)
    );
    // 合并两者，保证已勾选项不丢失
    this.foods = [...matchedFoods, ...tickedNonMatched];
  } else {
    // 搜索框为空时，显示全部食物
    this.foods = [...this.allFoods];
  }
}

方案B：始终显示全部食物，搜索时仅高亮匹配项（完全符合“保留全部列表”的需求） #

如果你希望不管搜不搜索，所有食物都显示在列表里，只是搜索时给匹配的项加个高亮，那这么改：

首先修改TS里的食物初始化，给每个食物加个isMatched标记：

foods = [
  { name: "Apple", isMatched: true },
  { name: "Cucumber", isMatched: true },
  { name: "Pineapple", isMatched: true },
  { name: "Sugar", isMatched: true },
  { name: "Nuts", isMatched: true },
];
allFoods: Array<{ name: string; isMatched: boolean }> = [];

constructor(private modalCtrl: ModalController) {
  // 深拷贝一份原始数据，避免修改影响源数据
  this.allFoods = JSON.parse(JSON.stringify(this.foods));
}

然后修改搜索方法，更新每个食物的isMatched状态：

onSearchFood(event) {
  this.searchQuery = event.detail.value?.trim() || '';
  
  this.foods = this.allFoods.map(food => ({
    ...food,
    // 搜索词存在时判断是否匹配，否则全部标记为匹配
    isMatched: this.searchQuery 
      ? food.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      : true
  }));
}

最后在HTML里给匹配的项加个高亮样式：

<!-- 给匹配的项加个class -->
<ion-item (ionChange)="onCheckbox($event, food)" [class.matched-food]="food.isMatched">
  <ion-label>{{ food.name }}</ion-label>
  <ion-checkbox slot="end" [value]="food.name" [checked]="isFoodTicked(food.name)">
  </ion-checkbox>
</ion-item>

在SCSS里添加高亮样式：

.matched-food {
  background-color: #f5f5f5; /* 浅灰色高亮，你可以改成自己喜欢的颜色 */
}

3. 修复复选框的勾选逻辑（避免重复添加） #

你原代码的onCheckbox方法只会添加已勾选的食物，不会处理取消勾选，而且还会重复添加同一个食物，得改成切换逻辑：

onCheckbox(event, food) {
  // 先找当前食物在已勾选列表里的索引
  const tickedIndex = this.tickedFoods.findIndex(f => f.name === food.name);
  
  if (event.detail.checked) {
    // 如果没在列表里，才添加
    if (tickedIndex === -1) {
      this.tickedFoods.push({ name: food.name });
    }
  } else {
    // 如果在列表里，就删掉
    if (tickedIndex !== -1) {
      this.tickedFoods.splice(tickedIndex, 1);
    }
  }
}

最后几个小细节要注意 #

• HTML里的搜索事件是(ionChange)="onSearchFood($event)"，但你原TS里写的方法名是onSearchIntolerance，一定要改成一致的，不然搜索事件根本不会触发！
• 原代码里else if (this.searchQuery === "") { this.foods = this.tickedFoods; }这行逻辑完全错误，已经在上面的方案里删掉了，保证清空搜索框时显示全部食物。

这样改完之后，不管你怎么搜索，已勾选的食物都会保持选中的图标样式，同时完全满足你“搜索后保留全部食物列表”的需求~

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