删除 PrimeNG OrderList 按钮

Question

我尝试从组件 orderList 中删除顶部和底部按钮。

我唯一想到的就是使用 css。我试过通过图标属性选择它们，但没有成功。

我的CSS是在primengcss之后加载的文件：

button[icon="fa-angle-double-up"] {
    display: none;
}

button[ng-reflect-icon="fa-angle-double-up"] {
    display: none;
}

我的组件：

@Component({
    template: `<p-orderList></p-orderList>`,
    styles: [`
        button[icon="fa-angle-double-up"] {
            display: none;
        }
        button[ng-reflect-icon="fa-angle-double-up"] {
            display: none;
        }
    `],

    encapsulation: ViewEncapsulation.None
})

那么有没有另一种方法可以删除我想要的按钮，或者 css 的正确方法是什么？

Answer 1

尝试

button[icon="fa-angle-double-up"] {
    display: none !important;
}

另一种选择：扩展 primeng 组件并重新定义 html 模板。

Answer 2

在styles.css文件中css下方

body .ui-orderlist-controls {
  display: none;
}

Answer 3

div[class="p-orderlist-controls"] {
    display: none !important;
}

删除 PrimeNG OrderList 按钮

PrimeNG OrderList buttons remove

primeng

angular