如何在 ionic 4 app ion-list 上放置一个简单的过滤器

Question

我有一个列表，它使用离子存储循环遍历 SQlite 数据库的键。我使用 Angular 切片来省略第一行。我还想省略名称为 a_images 的行。我不想对单个文本项使用管道。如果我被迫使用管道，对于单个文本项，管道内的基本代码会是什么样子？

html

<ion-list lines="inset">
  <ion-item *ngFor="let i of loop  | slice:2">
    <ion-label>{{i}}</ion-label>
    <ion-button fill="outline" color="success" slot="end" (click)="openKeyValue( i )">Open</ion-button>
  </ion-item>
</ion-list>

ts

// Traverse key/value pairs

listKeys() {
  this.storage.keys().then((k) => {
    console.table(k);
    this.loop = k;
    console.log("key value", this.loop);
  });
}

Answer 1

您可以使用 *ngIf.

将特殊情况代码放入循环中

类似于：

<ion-list lines="inset">
  <ng-container *ngFor="let i of loop  | slice:2">
    <ion-item *ngIf="i !== 'a_images'">
      <ion-label>{{i}}</ion-label>;
      <ion-button fill="outline" color="success" slot="end" (click)="openKeyValue( i )">Open</ion-button>
    </ion-item>
  </ng-container>
</ion-list>

或者，您可以在将数据分配给 this.loop 之前预先过滤数据，例如：

this.loop = this.loop.filter(key => key !== 'a_images');

Answer 2

这是我的代码。

<ion-item-sliding *ngFor="let i of loop | slice:2">
  <ion-item  *ngIf="i !== 'a_images'">
    <ion-label>{{i}}</ion-label>
    <ion-button fill="outline" color="success" slot="end" (click)="openKeyValue( i )">Open</ion-button>
  </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="deleteKeyValue( i )" color="danger">
        <ion-icon slot="icon-only" name="trash"></ion-icon>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

如何在 ionic 4 app ion-list 上放置一个简单的过滤器

How do I put a simple filter on an ionic 4 app ion-list

angular-pipe

angular

ionic4