Angular 如何在ionic 4应用程序列表中添加简单过滤器
我有一个列表,它使用离子存储循环遍历SQlite db的键。我使用角度切片来省略第一行到第二行。我还想省略一个名为a_images的行。我不希望对单个文本项使用管道。如果我被迫使用管道,那么管道内的基本代码对于单个文本项会是什么样子 htmlAngular 如何在ionic 4应用程序列表中添加简单过滤器,angular,ionic4,angular-pipe,Angular,Ionic4,Angular Pipe,我有一个列表,它使用离子存储循环遍历SQlite db的键。我使用角度切片来省略第一行到第二行。我还想省略一个名为a_images的行。我不希望对单个文本项使用管道。如果我被迫使用管道,那么管道内的基本代码对于单个文本项会是什么样子 html 您可以使用*ngIf将特殊情况代码放入循环中 比如: <ion-list lines="inset"> <ng-container *ngFor="let i of loop | slice:2"> <ion-i
您可以使用
*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.filter(key => key !== 'a_images');
这是我的密码
<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>
{{i}
打开
有效,但我必须将*ngIf=“I!==“a_images'”移动到新项目。看起来你不可能在同一件物品上有*ngFor和*ngIf啊,我不太确定。我知道你可以在同一个标签上使用I
,所以如果你把它绑定到某个东西上,你可以说
,在同一个标签上使用它。我已经更新了我的答案,将ng容器作为包装器-这不会输出任何html标签,所以这是最干净的方法。该死的,这太冷酷了,你用我的答案来修复你的代码,两天后,我的代表离开了我:PI刚刚把你放了回去。我不知道这是怎么发生的。请留言让我知道我是否成功地为你更新了信息:)谢谢,它只允许你标记一个问题作为答案,你可以在事后评论,所以我猜它被窃听了。是的,我一定是这样做了,无论如何,我也比你的其他一些答案投了更高的票
this.loop = this.loop.filter(key => key !== 'a_images');
<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>