prime ng p-dataview hide header

Question

我正在编写一个包含 "p-dataview" 元素的 PrimeNG 应用程序。我正在尝试使用组件 CSS 隐藏 header，如下所示。

HTML 片段

<p-dataView [value]="cbItems" layout="grid">
 <ng-template let-item pTemplate="gridItem">
   <div class="ui-g-12 ui-md-6" >
    <p-checkbox label={{item.value}}></p-checkbox>
   </div>
 </ng-template>
</p-dataView>

CSS 片段

.ui-dataview .ui-dataview-header {
  display: none;
}

如果我 "inspect" Chrome（样式）中的 p-dataview header 元素，我可以看到 .ui-dataview 的条目.ui-dataview-header {}。如果在 CHROME 中编辑它并添加 "display:none"，它会起作用。

.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

我只是不知道如何在我的源文件中做同样的事情。我敢肯定这更多地反映了我的新手 CSS 技能。任何帮助将不胜感激。

Answer 1

如果你把自定义样式放在全局样式文件中就可以了

style.css

.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

但是上述解决方案的问题将应用于整个项目中的 p-dataview 组件，primeng 通过添加客户 class 然后将 stlye 作为自定义 class 是这样的父 class

模板

<p-dataView styleClass="dataview-grid" [value]="cars" layout="grid">
 <ng-template let-item pTemplate="gridItem">
   <div class="ui-g-12 ui-md-6" >
    <p-checkbox label={{item.value}}></p-checkbox> {{item.brand}} , {{item.year}}
   </div>
 </ng-template>
</p-dataView>

style.css

.dataview-grid.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

demo

prime ng p-dataview hide header

PrimeNG p-dataview hide header

css

header

hide

primeng