Question

如果我使用内部CSS进行背景颜色填充调整工作正常。我想在Angular 4中分配外部CSS。使用内部css的代码如下：

HTML：

<p-dataTable [value]="facility"  [globalFilter]="gb" #dt>
   <p-column field="action" header=""></p-column>
   <p-column field="Goal" header="Goal" ></p-column>
   <p-column   class="datatable" field="day1" header="8/1" [style]="{'padding': '4px 0px'}" >
              <template pTemplate let-col let-data="rowData" >
                   <span [ngClass]="{'error': (data[col.field] <= 72),'warning':( 80 >= data[col.field] && data[col.field] >72), 'success':(data[col.field]>80)}" >{{ data[col.field] }}</span>
              </template>
   </p-column>
</p-dataTable>

CSS：

.error {
  background-color: red !important;
    padding-bottom: 47%;
    padding-top: 100%;
    padding-left: 37%;
    padding-right: 100%;
}

.warning{
    background-color:yellow !important;
    padding-bottom: 47%;
    padding-top: 100%;
    padding-left: 37%;
    padding-right: 100%;
}

.success{
    background-color:green !important;
    padding-bottom: 47%;
    padding-top: 100%;
    padding-left: 37%;
    padding-right: 100%;
}

Answer 1

如果要在datatable元素中添加类，则应使用：host selector：

:host /deep/ .ui-datatable {
}

用上面的这一行包装你的css类。

有关组件样式和主机选择器的更多信息： https://angular.io/guide/component-styles#host

如何将外部样式分配给angular4中的primeNG <p-column>

1 个答案: