2016-10-21 4 views
2

私はp-dataTableを使用していますが、tdにスタイルを適用したいのですが、このスタイルはフィールドの値に依存していますそれ。私のコードは次のとおりです。PrimeNg p-columnはtdにcssを適用しない

<p-dataTable [value]="cars" resizableColumns="true" [responsive]="true" reorderableColumns="true"> 
    <p-column [styleClass]="carStyle" field="carDesc"></p-column> 
    <p-column styleClass="ui-model-car" field="carModelDesc"></p-column> 
    <p-column styleClass="ui-width-icon-car"> 
    <template let-col let-item="rowData" pTemplate type="body"> 
     <div data-toggle="tooltip" data-placement="left" title="{{item.typeCarDesc}}"> 
      <span class="icon-circle {{item.typeCarIcon}} {{item.carColor}}"></span> 
     </div> 
    </template> 
    </p-column> 
</p-dataTable> 

carStyleが空またはUI-なしのボーダートップと私のCSSのようになります。

td.ui-without-border-top {border-top-style: hidden;} 

私のhtmlで私はcarStyleが表示されていないコードを生成しました。私はtdのスタイルが必要です。

+0

私はあなたの質問を正しく理解しているかどうか確認してください。変数carStyleが空でない場合、クラスcarStyleを追加します。 carStyleが空の場合、class-u-without-border-topが追加されますか? – Sefa

+0

tdに変数 'ui-without-border-top'を追加したいのですが、変数carStyleが空であるか 'ui-without-border-top'なので[styleClass] = "carStyle"コードhtmlはcarStyleの値を設定しませんが、div内のこの変数をテンプレートに設定すると、コードhtmlはcarStyle ' <テンプレートのlet-COLレット項目= "rowData" pTemplateタイプ= "身体">

{{item.carDesc}}
「 – user6787577

+0

あなたはスタイリングコンポーネントの内部のための角度2カスタムセレクタを試みたことがありますか? https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors – Yuri

答えて

0

この場合、<td>のcarStyleクラスが追加されているかどうか確認してください。

私は私は何の問題もなくこれをしなかった方法を紹介します:

私のテンプレートで:

<p-column styleClass="col-button"> 

そして、私のSCSS:

table { 
    tbody 
    { 
     td.col-button { 
      text-align: center; 
     } 
    } 
} 

はそれがなくて働いてどれだけのためにスクリーンショットの下を参照してください。問題: enter image description here

コードを確認して、もう一度やり直してください。問題が解決しない場合は、問題の手引きで投稿してください。

関連する問題