angle2のprimeNG <p-column>に外部スタイルを割り当てる方法

Question

内部CSSを使用して背景色のパディング調整をうまく動作させる場合。次のように私は内部のCSSを使用して 4角コードで外部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%; 
}