css - 当使用 Angular Material 从 mat-card-content 中选择 mat-radio 按钮时，如何将背景添加到 mat-card？

Question

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

 <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>

Answer 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>