在 Ionic / Angular 离子卡上创建 DOM 过滤器答案

【问题标题】：Create DOM filter on Ionic / Angular ion-card在 Ionic / Angular 离子卡上创建 DOM 过滤器
【发布时间】：2021-03-11 15:20:49
【问题描述】：

Ionic 项目有一个 ion-card 并且它工作正常，问题是列表正在增长，我需要设置一个字段来过滤搜索，在 ionic 中有没有本地方法可以做到这一点？或者我必须使用 JQuery。

谁有例子？

卡片是动态创建的

<ion-card *ngFor="let data of dataArray" id="{{ data._id }}">
     <ion-card-content class="p-0">
         <ion-card-header>
            <ion-card-title>
              {{ data.title }}
            </ion-card-title>
            <ion-card-subtitle *ngIf="data.protocol" id="{{data.protocol}}">
                {{ data.protocol }}
            <ion-icon name="copy-outline" (click)="copyProtocol(data.protocol)" class="ml-2"></ion-icon>
          </ion-card-subtitle>
          <ion-card-subtitle>
            {{ data.description }}
          </ion-card-subtitle>
          </ion-card-header>

          <ion-item lines="none" class="ion-float-left">
             {{ data.updatedAt | localDatetime }}
          </ion-item>

         <ion-item lines="none" class="ion-float-right">
         <ion-tab-button (click)="menu(data._id, data.title, data.description, data.visibility)">
         <ion-icon name="ellipsis-vertical-outline"></ion-icon>
         </ion-tab-button>
        </ion-item>

     <ion-item lines="none" *ngIf="data.marking" class="w-100">
     <ion-label class="w-100" *ngIf="data.marking">{{ data.marking }}</ion-label>
     </ion-item>
</ion-card-content>

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

我使用 JQuery 创建了一个过滤器，基本过滤器，也许有人可以帮助改进:-)

但是这个搜索是区分大小写的，怎么解决呢？

<ion-searchbar (ionInput)="filterChannel($event.target.value)"></ion-searchbar>

JQuery 代码

 filterChannel(search: any) {
    $("ion-card-title").each(function () {
      if ($(this).text().indexOf(search) != -1) {
        $(this).closest("ion-card").removeClass('d-none');
      }
      else {
        $(this).closest("ion-card").addClass('d-none');
      }
    });
  }

【讨论】：