在Angular 2中使用ngFor和ngIf设置一个条件。

38 浏览
0 Comments

在Angular 2中使用ngFor和ngIf设置一个条件。

这个问题已经在这里得到了答案:

*ngIf和*ngFor在同一个元素上引起错误

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

这段代码只显示在数据类型为1的数据中有名称的按钮，但它也为每个没有类型为1的数据条目创建空的按钮，我无法想出如何摆脱空的按钮。非常感谢任何帮助。

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

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

@Pipe({
    name: 'somepipe',
})
export class SomePipe {
    transform(objects: any[]): any[] {
        if(objects) {
            return objects.filter(object => {
                return object.data.type === 1;
            });
        }
    }
}

然后你可以在HTML中这样使用它:

0
0 Comments

我建议改变你的 button 和 div 的位置:

这样只有对于有效的项目才会创建按钮。

如果不想要 ，可以使用 代替。

虽然出于性能原因不建议，但你也可以在组件中使用一个函数：

组件包含一个函数：

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

虽然这样也可以工作，但不建议这样做，并应尽可能避免。

0