Question

选中mat-card-content内的mat-checkbox时，我需要更改mat卡的背景颜色。

<mat-card class="checkboxselect text-center little-profile workspacetype">
    <mat-card-content>
        <mat-checkbox class="multipleselect"></mat-checkbox>
        <div class="workspacetypeimage">
            <i class="bgi bgi-certificate"></i>
        </div>
        <mat-card-actions>
            <h4 class="m-t-0 m-b-0 typetitle">Bidder Dashboard</h4>
        </mat-card-actions>
    </mat-card-content>
</mat-card>

Answer 1

设置背景的方法很多。我想到的一种简单的方法就是使用ngStyle，但是您需要在复选框或类似内容上设置ngModel，以便您可以检查其状态：

<mat-card [ngStyle]="{'background': myModel? 'blue':'red'}" class="checkboxselect text-center little-profile workspacetype">
    <mat-card-content>
        <mat-checkbox [(ngModel)]="myModel" class="multipleselect"></mat-checkbox>
        <div class="workspacetypeimage">
            <i class="bgi bgi-certificate"></i>
        </div>
        <mat-card-actions>
            <h4 class="m-t-0 m-b-0 typetitle">Bidder Dashboard</h4>
        </mat-card-actions>
    </mat-card-content>
</mat-card>

demo

当选中mat-card-content内的mat-checkbox时，如何在CSS卡片背景中添加CSS？

1 个答案: