Angular 物化css复选框不使用模型变量

这是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

，它工作正常，直到我通过单击复选框本身来更改复选框的值。单击复选框后，它将从buton停止工作。

Materialize使用

选中的
非
属性选中的
将其标记为选中

打字脚本文件

// 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>


{{item.name}
使用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>


{{item.name}
{{items}json}
对我来说什么都不管用，所以我使用了材质图标来实现同样的效果

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

这工作得很好。
您应该对
attr.checked
使用双向绑定，即
[（attr.checked）]=“isSelected”
，以确保在手动检查时更改该值。另外，我认为您不应该使用三元运算符将值放入
isSelected
，因为它已经是布尔值了。是否有任何理由不使用[（ngModel）]？@isAif，我使用的是每个对象都已isSelected的is循环，当我使用ngModel时，单击它选择的单个值all@Eliseo在循环中，这不起作用properly@isAif是的，我使用的是相同的，
[（attr.checked）]=“item.isSelected”
显示默认选中的所有项目
.label-icon {
    font-size: 15px;
    &.active {
        color: $color-active;
    }
}