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

Question

嗨，我一直在尝试使用 ngIF 和 ngFor 成功过滤数组。

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

这段代码只为 type=1 的数据显示带有名称的按钮，但它也为每个没有 type=1 的数据条目创建空按钮，我不知道如何摆脱空按钮。任何帮助深表感谢。

原文由 DN0300 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我会触发你的 button 和 div ：

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

这样，只会为有效项目创建按钮。

如果 <div> 不希望使用 <ng-container> 代替。

尽管由于性能原因不建议使用，但您也可以在组件中使用函数：

 <button *ngFor="let item of filterItemsOfType('1')">{{item.data.name}}</button>

您的组件具有功能的地方：

 filterItemsOfType(type){
    return this.items.filter(x => x.data.type == type);
}

虽然这可行，但不建议这样做，应尽可能避免。

原文由 Tyler Jennings 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Jaroslaw K. 发布，翻译遵循 CC BY-SA 3.0 许可协议