当对象的id＆gt;时，Angular2添加样式。 100

Question

我有所有不同ID的对象标记，现在我想在id > 100

时设置额外的样式

这里的代码是：

<span *ngIf="result.object.reference > 100" class="tooltip-data">
   {{ result.resource.display_name }}
</span>

但是如何添加额外的样式，如style="left: 12px"

Answer 1

您可以绑定到有条件的样式，如

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [style.left.px]="id > 100 ? 12 : 0">

或

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [style.left]="id > 100 ? '12px' : '0px'">

如果id <= 100这可能有用

，则根本不想设置样式

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [ngStyle]="getStyle(id)">

noStyle = {};
gT100Style = {left: '12px'};
getStyle(id) {
  return id > 100 ? this.gT100Style : this.noStyle;
}

重要的是，noStyle和gT100Style在getStyle()之外定义，否则更改检测会导致麻烦，因为每次调用都会返回一个新的样式对象实例。

这也应该有效：

<span *ngIf="result.object.reference > 100" class="tooltip-data" 
    [ngStyle]="id > 100 ? {left: '12px'} : {}">

Plunker example