选中 mat-card-content 内的 mat-checkbox 时，如何将 css 添加到 mat-card 背景？

Question

选中 mat-card-content

中的 mat-checkbox 时，我需要更改 mat-card 背景颜色

<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 添加到 mat-card 背景？

How to add css to the mat-card background when mat-checkbox is checked which is inside the mat-card-content?

angular

typescript

angular-material

parent-child

mat-card