我想要实现的是在Ion-SearchBar中搜索另一个时，保持选中的项目是选中的。 我设法保留了选中的项目，但带有选中的图标并没有保持选中状态。 我想要的是，在我搜索后，保持所有的食物列表和检查的那些看起来喜欢检查，而不是失去状态。

它看起来是这样的:

这是我的HTML:

<ion-header class="ion-padding ion-no-border">
  <ion-toolbar>
    <ion-title [hidden]="showSearch">Select Foods</ion-title>
    <ion-buttons slot="start">
      <ion-button [hidden]="showSearch" (click)="onCloseModal()">
        Close
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button [hidden]="!showSearch" (click)="showSearch = !showSearch">
        Close
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="showSearch = !showSearch">
        <ion-icon
          name="search-outline"
          slot="icon-only"
          [hidden]="showSearch"
        ></ion-icon>
      </ion-button>
    </ion-buttons>

    <ion-searchbar
      [hidden]="!showSearch"
      (ionChange)="onSearchFood($event)"
      class="items-searchbar"
      animated
      placeholder="Search Food"
    ></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list *ngFor="let food of foods">
    <ion-item (ionChange)="onCheckbox($event)">
      <ion-label>{{ food.name }}</ion-label>
      <ion-checkbox slot="end" value="{{ food.name }}"> </ion-checkbox>
    </ion-item>
  </ion-list>
  <h5 *ngIf="foods.length === 0">
    Oups, no food found.
  </h5>
</ion-content>

这是我的TS

import { Component, OnInit } from "@angular/core";
import { ModalController } from "@ionic/angular";

@Component({
  selector: "app-search-modal",
  templateUrl: "./search-modal.component.html",
  styleUrls: ["./search-modal.component.scss"],
})
export class SearchModalComponent implements OnInit {
  showSearch = false;
  searchQuery = "";
  foods = [
    { name: "Apple" },
    { name: "Cucumber" },
    { name: "Pineapple" },
    { name: "Sugar" },
    { name: "Nuts" },
  ];

  allFoods: Array<{ name: string }> = [];

  tickedFoods: Array<{ name: string }> = [];

  constructor(private modalCtrl: ModalController) {
    this.allFoods = this.foods;
  }

  ngOnInit() {}

  onCloseModal() {
    this.modalCtrl.dismiss();
  }

  onSearchIntolerance(event) {
    this.foods = this.allFoods;
    this.searchQuery = event.detail.value;
    if (this.searchQuery && this.searchQuery.trim() !== "") {
      this.foods = this.foods.filter((term) => {
        return (
          term.name
            .toLowerCase()
            .indexOf(this.searchQuery.trim().toLowerCase()) > -1
        );
      });
    } else if (this.searchQuery === "") {
      this.foods = this.tickedFoods;
    }
  }

  onCheckbox(event) {
    if (event.detail.checked === true) {
      let tickedFoods = event.detail.value;
      this.tickedFoods.push({ name: tickedFoods });
    }
  }
}