使用角度2中的ngFor和ngIf应用条件

Question

您好我曾尝试使用ngIF和ngFor过滤数组并取得一些成功.

<button *ngFor="let item of items"> <div *ngIf="(item.data.type == 1)"> {{item.data.name}} </div> </button>

对于类型为1的数据,此代码仅显示带有名称的按钮,但它也为每个没有type = 1的数据条目创建空按钮,我无法弄清楚如何摆脱空按钮.任何帮助深表感谢.

Answer 1

我将触发器您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);
}

Answer 2

您可以创建自己的管道.这是更好的解决方案.

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

Answer 3

<button *ngFor="let item of getItems()">...</button>

getItems() {
  return this.items.filter((item) => item.data.type === 1);
}

this.items该函数上方某处的项目数组在哪里？

看一下这个