实现 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>

有一个按钮可以将 true/false 设置为 isSelected，在我通过单击复选框本身更改复选框的值之前它工作正常。单击复选框后，它会从按钮停止工作。

Answer 1

Materialize checkbox 使用 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 2

使用 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 3

对我来说没有任何效果，所以我使用 material 图标来实现同样的效果

<!-- 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;
    }
}

一切正常。

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

materialize css checkbox not working with model variable

checkbox

materialize

angular