如何根据角度2中的某些条件更改md-card的背景颜色?

时间:2017-05-17 08:28:44

标签: css3 angular material-design angular-material2

我通过 * ngFor 循环动态显示卡片。我想根据某些条件更新卡背景颜色。例如,如果某些条件满足,则卡片背景为绿色。否则,卡背景颜色不变或更改为红色。如何在Angular 2中实现这种动态行为?我尝试使用 * ngIf ,但随后布局搞砸了。我只想根据条件更改背景颜色,而不影响任何布局更改。对于响应行为,我使用flex布局。

<div fxLayout="row" fxLayoutWrap  style="padding-bottom: 25px; 
 padding-top: 25px;  margin: auto;justify-content: center" >  
<md-card fxFlex.gt-md="45" fxFlex.md="45"  fxFlex.sm="auto" fxFlex.xs="100" *ngFor="let data of myArray"
[style.background]="'lightBlue'"
          style="margin:5px;">
          <md-card-content>
            <h1></h1>
            <h2></h2>
          <h2>
            </h2>
          </md-card-content>
          </md-card> 
        </div>

1 个答案:

答案 0 :(得分:5)

这也适用[style.background]="condition ? 'lightBlue':'yellow'"