web-dev-qa-db-ja.com

条件付きスタイリングとバインド

In Angular 2 TABLE TD内でこのようなドル値をバインドしています。

<td>
  {{eachOutlet.dollarValue}}
</td>

このdollarValueは、0未満または0に等しいか、0より大きい値になります。ゼロ未満の場合、「赤」の色で表示されます。ゼロの場合、何も表示されません。空白のテキスト。ゼロより大きい場合は、千単位の区切り記号を使用して数値を表示する必要があります。

Angular 2バインディングを使用してこのような条件付きスタイリングを適用するにはどうすればよいですか？それを行うことさえ可能ですか？

angularconditionalstyling
22
Adam
<td>
  <span 
    *ngIf="eachOutlet.dollarValue != 0"
    [style.color]="eachOutlet.dollarValue < 0 ? 'red' : null">
      {{eachOutlet.dollarValue | number:'1.0-2'}}
  </span>
</td>

また、スタイリングを行うディレクティブ（numberパイプを除く）を作成して、さまざまな要素で再利用しやすくすることもできます。

プランカーの例

48
Günter Zöchbauer

複数のスタイルプロパティの別のオプション：

  • テンプレート内：
<div style="Word-break: break-all;" [ngStyle]="{ 'top': getTop() +'px', 'left': getLeft() +'px' }"> </div>
  • そしてコンポーネントで：
getTop(){
    return (this.topValueShowComment> 0)? this.topValueShowComment : 0;
}

getLeft(){
    return (this.leftValueShowComment> 0)? this.leftValueShowComment : 0;
}
4
Dudi

このようにすることができます。

<div class="responsive-standalone--Overlay" (click)="mobileRMenu()" [style.display]="rMenu ? 'block' :'none'"></div>
0
Mukesh Kumar Bijarniya