Как я могу поместить простой фильтр в ионный список приложений 4 ионных - PullRequest
Новая
       34

Как я могу поместить простой фильтр в ионный список приложений 4 ионных

2 голосов
/ 30 сентября 2019

У меня есть список, который перебирает ключи базы данных sqlite с использованием ионного хранилища. Я использую Угловой срез, чтобы опустить первые строки. Я также хочу опустить строку с именем 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);
  });
}

Ответы [ 2 ]

1 голос
/ 30 сентября 2019

Вы можете поместить в свой цикл специальный регистр кода с помощью *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');
0 голосов
/ 30 сентября 2019

Вот мой код. 

<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>
...