css - 如何突出显示 md-card 或更改 Angular 2 中 med-card 的背景颜色

Question

我有 4 张 md 卡。在选择(单击)卡片时，我想突出显示卡片或更改卡片的背景。你能告诉我如何实现吗

<div class="ui-g">
      <div class="ui-g-3"><md-card  [style.background]="'#fbeafc'"><md-card-content><h3>Component1</h3>
        </md-card-content></md-card></div>
    <div class="ui-g-3"><md-card  [style.background]="'#fbeafc'"><md-card-content><h3>Component2</h3>
        </md-card-content></md-card></div>
    <div class="ui-g-3"><md-card  [style.background]="'#fbeafc'"><md-card-content><h3>Component3</h3>
        </md-card-content></md-card></div>
     <div class="ui-g-3"><md-card  [style.background]="'#fbeafc'"><md-card-content><h3>Component4</h3>
        </md-card-content></md-card></div>
    </div>

Answer 1

一个简单的方法是，将您的代码更改为以下内容

组件

//declare a class member in component
private isSelected:string;

//in the component define a function
setColor(value){
  this.isSelected=value;
}

样式

//in css
.color1{
  background:#fbeafc
}

.color1{
  background:#fbeafc
}

.color1{
  background:#fbeafc
}

.color1{
  background:#fbeafc
}

模板

<div class="ui-g">
  <div class="ui-g-3">
    <md-card  [class.color1]="isSelected === 'color1'" (click)="setColor('color1')">
      <md-card-content>
        <h3>Component1</h3>
      </md-card-content>
    </md-card>
  </div>
  <div class="ui-g-3">
    <md-card  [class.color2]="isSelected === 'color2'" (click)="setColor('color2')">
      <md-card-content>
        <h3>Component2</h3>
      </md-card-content>
    </md-card>
  </div>
  <div class="ui-g-3">
    <md-card  [class.color3]="isSelected === 'color3'" (click)="setColor('color3')">
      <md-card-content>
        <h3>Component3</h3>
      </md-card-content>
    </md-card>
  </div>
  <div class="ui-g-3">
    <md-card  [class.color4]="isSelected === 'color4'" (click)="setColor('color4')">
      <md-card-content>
        <h3>Component4</h3>
      </md-card-content>
    </md-card>
  </div>
</div>

希望这对您有所帮助。请在使用前验证代码。我还没有测试过