实体化css复选框不适用于模型变量

Question

这是html

<div class="checkbox checkbox-circle">
<label>
<input type="checkbox" [attr.checked]="isSelected ? true : null" class="filled-in"
(change)="rowToggleSelection(row,$event,i)" />
<span></span>
</label>
</div>

有一个按钮可以将CCD_ 1设置为CCD_。单击复选框后，它将停止从按钮工作。

Answer 1

使用ngModel，了解如何在.ts 中不需要更多内容

<form *ngFor="let item of items" class="checkbox checkbox-circle">
<label>
<input name="ck" type="checkbox" [(ngModel)]="item.isSelected"  class="filled-in"
/>
<span>{{item.name}}</span>
</label>
</form>
<pre>
{{items|json}}
</pre>

Answer 2

Materialize复选框使用checked而不是attr.checked将其标记为选中。

打字脚本文件

// items to use as checkbox
public items = [
{
name: "first",
isSelected: false
},
{
name: "second",
isSelected: true
}
];
// toggle the checkbox
toggleCheckbox(item) {
item.isSelected=!item.isSelected;
}

模板文件

<form *ngFor="let item of items" class="checkbox checkbox-circle">
<label>
<input type="checkbox" [checked]="item.isSelected" class="filled-in"
(change)="toggleCheckbox(item)" />
<span>{{item.name}}</span>
</label>
</form>

Answer 3

对我来说什么都不起作用，所以我使用材料图标来实现相同的

<!-- checked -->
<i class="material-icons label-icon active" *ngIf="isSelected">radio_button_checked</i>
<!-- un-checked -->
<i class="material-icons label-icon" *ngIf="!isSelected">radio_button_unchecked</i>

和一些css

.label-icon {
font-size: 15px;
&.active {
color: $color-active;
}
}

这非常有效。