离子的内部神经生长因子2

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='好'然后在第二行中添加style=“background-color:red”。

我如何才能完成它？




Answer 1

你可以像这样使用 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>

Answer 2

匿名用户

与Paolos的回答类似，当只影响一个属性时，可以使用[style.prop]="<>语法，其中prop是您要影响的css属性，EXPr是您要计算的表达式。

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

这也与< code>ngClass类似，因为您可以使用< code >[class . class name]= " expr " 来应用< code >。className，如果< code>expr为真。因此，您可以在样式中添加一个类

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

并在您的模板使用

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

因为只有在满足条件时才会应用样式。

Answer 3

您可以根据 Angular 2 文档使用 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 的值是一个键：值哈希，其中键s 是 CSS 属性名称，值s 是表达式。在上面的例子中，我在 x.Brand 上使用了一个测试来决定应该将哪个值分配给 div 的背景颜色属性。