您好我曾尝试使用ngIF和ngFor过滤数组并取得一些成功。
<button *ngFor="let item of items"> <div *ngIf="(item.data.type == 1)"> {{item.data.name}} </div> </button>
此代码仅显示具有类型= 1的数据的名称中的按钮,但它也为每个没有type = 1的数据条目创建空按钮,我无法弄清楚如何摆脱空按钮。非常感谢任何帮助。
答案 0 :(得分:46)
我会翻转你的button
和div
:
<div *ngFor="let item of items">
<button *ngIf="(item.data.type == 1)">{{item.data.name}}</button>
</div>
这样只会为有效项目创建按钮。
您还可以在组件中使用某个功能:
<button *ngFor="let item of filterItemsOfType('1')">{{item.data.name}}</button>
您的组件具有功能:
filterItemsOfType(type){
return this.items.filter(x => x.data.type == type);
}
答案 1 :(得分:17)
您可以创建自己的管道。这是更好的解决方案。
@Pipe({
name: 'somepipe',
})
export class SomePipe {
transform(objects: any[]): any[] {
if(objects) {
return objects.filter(object => {
return object.data.type === 1;
});
}
}
}
并以这种方式在html中使用它:
<button *ngFor="let item of items | somepipe"> <div> {{item.data.name}} </div> </button>
答案 2 :(得分:1)
<button *ngFor="let item of getItems()">...</button>
getItems() {
return this.items.filter((item) => item.data.type === 1);
}
其中this.items
是此函数上方的项目数组。
检查出来