选中 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?
选中 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>
设置背景的方法有很多种。我想到的一种看似简单的方法是使用 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>
选中 mat-card-content
<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>
设置背景的方法有很多种。我想到的一种看似简单的方法是使用 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>