使用Angular Material从mat-card-content中选择mat-radio按钮时如何为mat-card添加背景？答案

【问题标题】：How to add background to mat-card when mat-radio button is selected from within mat-card-content, using Angular Material?使用Angular Material从mat-card-content中选择mat-radio按钮时如何为mat-card添加背景？
【发布时间】：2019-03-29 20:25:28
【问题描述】：

单击每个单选按钮时，我需要为每个垫子卡添加背景。背景应仅适用于与单击的 mat-radio 按钮相对应的 mat 卡片。

 <mat-card class="text-center little-profile workspacetype">
                <mat-card-content>
                  <div class="workspacetypeimage">
                    <i class="bgi bgi-contractsonly"></i>
                  </div>
                  <mat-card-actions>
                    <h4 class="m-t-0 m-b-0  typetitle">Contracts Only</h4>
                  </mat-card-actions>
                </mat-card-content>
                <mat-radio-button value="1"></mat-radio-button>
              </mat-card>

 <mat-card class="text-center little-profile workspacetype">
                <mat-card-content>
                  <div class="workspacetypeimage">
                    <i class="bgi bgi-contractsonly"></i>
                  </div>
                  <mat-card-actions>
                    <h4 class="m-t-0 m-b-0  typetitle">Contracts Only</h4>
                  </mat-card-actions>
                </mat-card-content>
                <mat-radio-button value="2"></mat-radio-button>
              </mat-card>

【问题讨论】：

请在上面给我建议
任何人有一个想法，如何做到这一点？

标签： css angular radio-button angular-material mat-card

【解决方案1】：

您可以使用ngClass 设置设置相关背景颜色的类-ngClass 的变量由单选按钮设置...从code here 开始...进行以下更改：

card-fancy-example.ts 是：

import { Component, Output } from '@angular/core';
import { MatRadioChange } from '@angular/material';

@Component({
  selector: 'card-fancy-example',
  templateUrl: 'card-fancy-example.html',
  styleUrls: ['card-fancy-example.css'],
})
export class CardFancyExample {

  selectedChoice: string;
  choices: string[] = ['RedClass', 'YellowClass', 'BlueClass'];

  choiceChanged(event: MatRadioChange) {
    console.log(event.value);
  }

}

card-fancy-example.css 是：

.example-card {
  max-width: 400px;
}

.example-header-image {
  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
  background-size: cover;
}

.example-card, .workspacetype { margin:10px 0;}

.RedClass{ background: lightpink;}
.YellowClass{ background: lightyellow}
.BlueClass{background: lightblue}

card-fancy-example.html 是：

    <mat-card class="text-center little-profile workspacetype" [ngClass]='selectedChoice'>
  <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <div class="workspacetypeimage">
      <i class="bgi bgi-contractsonly"></i>
    </div>
    <mat-card-actions>
      <h4 class="m-t-0 m-b-0  typetitle">Contracts Only</h4>
    </mat-card-actions>
  </mat-card-content>
  <mat-radio-group [(ngModel)]="selectedChoice" >
  <mat-radio-button class="example-radio-button" *ngFor="let item of choices" [value]="item" (change)="choiceChanged($event)">
    {{item}}
  </mat-radio-button>
  </mat-radio-group>
</mat-card>

【讨论】：