Question

单击每个单选按钮时，我需要为每个Mat卡添加背景。背景应该仅适用于与单击了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>

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>

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

1 个答案: