Javascript 在ion searchbar中搜索另一个项目时，如何保持选中的项目处于选中状态？

我想要实现的是在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>

精选食物
接近
接近
{{food.name}
没有找到食物。

这是我的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 });
    }
  }
}

从“@angular/core”导入{Component，OnInit}；
从“@ionic/angular”导入{ModalController}”；
@组成部分({
选择器：“应用程序搜索模式”，
templateUrl:“./search modal.component.html”，
样式URL:[“/search modal.component.scss”]，
})
导出类SearchModalComponent实现OnInit{
showSearch=false；
searchQuery=“”；
食物=[
{名称：“苹果”}，
{名称：“黄瓜”}，
{名称：“菠萝”}，
{name:“Sugar”}，
{name:“Nuts”}，
];
allFoods:Array=[]；
ticketdfoods:Array=[]；
构造函数（专用modalCtrl:ModalController）{
this.allFoods=this.foods；
}
ngOnInit（）{}
onCloseModal（）{
this.modalCtrl.discouse（）；
}
onSearchIntolerance（事件）{
this.foods=this.allFoods；
this.searchQuery=event.detail.value；
if（this.searchQuery&&this.searchQuery.trim（）！==“”）{
this.foods=this.foods.filter（（术语）=>{
返回(
term.name
.toLowerCase（）
.indexOf（this.searchQuery.trim（）.toLowerCase（））>-1
);
});
}else if（this.searchQuery==“”）{
this.foods=this.ticketdfoods；
}
}
onCheckbox（事件）{
if（event.detail.checked==true）{
让ticketfoods=event.detail.value；
this.ticketfoods.push（{name:ticketfoods}）；
}
}
}

如果要保留选中的项目，可以使用

ion checkbox

的

checked

功能，并创建一个函数来检查食物是否存在于

tickedFoods

数组中

onSearchIntolerance(event) {
    this.intolerances = this.allIntolerances;
    this.searchQuery = event.detail.value;
    if (this.searchQuery && this.searchQuery.trim() !== "") {
      this.intolerances = this.intolerances.filter(term => {
        return (
          term.name
            .toLowerCase()
            .indexOf(this.searchQuery.trim().toLowerCase()) > -1
        );
      });
    } else if (this.searchQuery === "") {
      // resetting the intolarances to show all the intolarances
      this.intolerances = this.allIntolerances
    }
  }

<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 }}" [checked]="isFoodSelected(food.name)"> </ion-checkbox>
    </ion-item>
  </ion-list>
  <h5 *ngIf="foods.length === 0">
    Oups, no food found.
  </h5>
</ion-content>

这将允许您在使用搜索功能后为列表中保留的食物添加

选中的
属性

解决方案：
Hi！非常感谢您的回复。我刚试过你的建议，部分奏效了。现在，自启动以来，默认情况下会选中所有项目。但是，我希望它们在默认情况下被取消选中，并被删除。只有在我检查它们之后才保持选中状态。你觉得怎么样？对不起，我对编码还不熟悉，我真的不确定。我认为它不需要条件，它会自动检查它们。这是我在stackblitz的代码嗨！谢谢！它工作，但现在当我选择一个它会自动勾选所有的项目。在列表中，我刚才看到了，抱歉，但现在我们遇到了同样的问题。在我们搜索之后，选择食物，然后返回到整个列表，不会保留选中的元素tickethello！我先前的回答有一些问题。当
searchQuery==“
和
.includes（）
检查
isFoodSelected
中的
this.intolrances
时，应将
this.allintolrances
分配给
this.allintolrances
。我已经用细节更新了我的答案。
isFoodSelected(testFood) {
    const tickedFoodNames = this.tickedFoods.map(food=>food.name);
    return tickedFoodNames.includes(testFood);
  }