ngIf內ngFor ionic2

Question

在下面Ionic2/Angular2模板：

<ion-row style="background-color: #f4b434"> 
    <ion-col col-4><b>Brand</b></ion-col> 
    <ion-col col-1><b>Qty</b></ion-col> 
    <ion-col col-2><b>Sales</b></ion-col> 
    <ion-col col-2 style="color: whitesmoke "><b>Qty</b></ion-col> 
    <ion-col col-3 style="color: whitesmoke "><b>Sales</b></ion-col> 
</ion-row> 
<div *ngFor="let x of datasales"> 
    <ion-row> 
     <ion-col col-4><b>{{x.Brand}}</b></ion-col> 
     <ion-col col-1>{{x.Qty_Today | number:0 }}</ion-col> 
     <ion-col col-2>{{x.SalesToday | number:0 }}</ion-col> 
     <ion-col col-2>{{x.Qty_MTD | number:0 }}</ion-col> 
     <ion-col col-3>{{x.Sales_MTD | number:0 }}</ion-col> 
    </ion-row> 
</div> 

如果x.Brand = 'Good'然後在第二ion-row我想補充style="background- color:red"。

我該如何實現它？

Answer 1

您可以按照Angular 2 docs使用ngStyle，例如。像這樣：

<div *ngFor="let x of datasales"> 
    <ion-row [ngStyle]="{'background-color' : x.Brand==='Good'? 'red' : ''}"> 
    <ion-col col-4><b>{{x.Brand}}</b></ion-col> 
    ... 
    </ion-row> 
</div> 

請注意：

1. 不要忘了周圍ngStyle
2. 的方括號ngStyle值是關鍵：哈希值，其中key s爲CSS屬性名稱和value是表達式。在上述情況下，我對x.Brand使用了一個測試來決定應將哪個值分配給div的background-color屬性。

Answer 2

與Paolos答案類似，隻影響一個屬性時，可以使用[style.prop]="expr"語法，其中prop是要影響的css屬性，expr是要評估的表達式。

<ion-row [style.background-color]="x.Brand==='Good'?'red':''"> 
</ion-row> 

這也適用於ngClass類似的，因爲你可以使用[class.className]="expr"申請.className如果expr是真實的。因此，你可以將類添加到您的風格

.is-good-brand { 
    background-color: red; 
} 

，並在你的模板中使用

<ion-row [class.is-good-brand]="x.Brand==='Good'"> 
</ion-row> 

由於您只想當條件被滿足應用樣式。