[英]Angular 5 ngClass with a if
這是我在表中一行的代碼
<tr class="user-item" *ngFor="let device of group.devices" (click)="$event.stopPropagation()" ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'">
<td class="qkFix">{{ device.deviceId }}</td>
<td class="qkFix">{{ device.alias }}</td>
<td class="qkFix" *ngIf="device.onlineState == 'Online'" ngClass="colorOnline">{{ device.onlineState }}
<span class="dotOnline"></span>
</td>
<td class="qkFix" *ngIf="device.onlineState == 'Offline'" ngClass="colorOffline">{{ device.onlineState }}
<span class="dotOffline"></span>
</td>
<td class="qkFix">
<button type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); showDevice(device); editDeviceDialog()">
<i class="material-icons">{{ (auth.hasPermissions(['update-devices'], true)) ? 'edit' : 'open_in_new'}}</i>
</button>
<button [disabled]="!(auth.hasPermissions(['delete-devices'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation();deleteDevice(device)">
<i *ngIf="(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation();deleteDevice(device)">delete</i>
<i *ngIf="!(auth.hasPermissions(['delete-devices'], true))" class="material-icons" (click)="$event.stopPropagation()">delete</i>
</button>
<button *ngIf="device.onlineState == 'Online'" [disabled]="!(auth.hasPermissions(['remote-control'], true))" type="button" class="btn btn-default btn-xs" (click)="$event.stopPropagation(); remoteSession(device)">
<i *ngIf="(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation();remoteSession(device)" class="material-icons">swap_horiz</i>
<i *ngIf="!(auth.hasPermissions(['remote-control'], true))" (click)="$event.stopPropagation()" class="material-icons">swap_horiz</i>
</button>
</td>
</tr>
特定的ngClass代碼
ngClass="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"
如果該設備的onlineState處於“脫機”狀態, 我希望該行 highlight
該類。 device.onlineState either returns Online or Offline
。 如果onlineState為Online,則不應有一個類。
嘗試將ngClass
放在方括號內,例如[ngClass]
。 有關更多詳細信息 。
回答:
[ngClass]="device.onlineState == 'Offline' ? 'highlight' : 'highlight2'"
如果要添加multiple classes
,可以執行以下操作:
選項1:
[ngClass]="condition ? 'class1 class2 class3' : 'class4 class5 class6'"
選項2:
[ngClass]="{'class1': condition1, 'class2': Condition2}"
您可以執行以下操作:
[class.highlight]="device.onlineState == 'Offline'"
並且您已經必須執行[ngClass]
而不是ngClass
來允許表達式的執行。
ngClass是一個指令,它接受一個對象作為參數,以您的類的名稱作為屬性,而條件作為值,例如:
[ngClass]="{'highlight': device.onlineState === 'Offline'}"
您可以添加多個這樣的類:
[ngClass]="{'highlight other-class': device.onlineState === 'Offline'}"
要么
[ngClass]="{'highlight': device.onlineState === 'Offline', 'other-class': condition}"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.