ngIf inner 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是CSS属性名称，value是表达式。在上面的例子中，我在x.Brand上使用了一个测试来决定应该将哪个值赋给background-color的{​​{1}}属性。

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>

由于您只想在满足条件的情况下应用样式。

Answer 3

您可以像这样使用ngStyle；

<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"
    [ngStyle]="{backgroundcolor: x.brand='Good' ? 'red' : 'transparent'}">
    <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>