angular - 选中复选框时更改标签样式 - Ionic 3

Question

你好...我有一个 ion-checkbox，当它被选中时，它应该会改变 ion-label 的一些样式。

 <ion-label>{{item.itemName}}</ion-label>
 <ion-checkbox [(ngModel)]="item.checked" (ionChange)="check(item)" color="primary"></ion-checkbox>

当我单击该复选框时，与该复选框相关联的 ionic 标签应为:

 text-decoration: line-through;

当取消选中时，文本装饰应该会再次正常...

我试过在 SCSS 中使用 ion-checkbox:checked，但它似乎不起作用。

关于如何实现这一点有什么想法吗？

Answer 1

您可以使用样式属性绑定(bind)，如下所示:

<ion-label [style.text-decoration]="item.checked ? 'line-through' : 'none'">{{ item.itemName }}</ion-label>

请看 this working Stackblitz project .