Html “角度材质”复选框自动取消选中自身

我有一个列表，我使用

角度材质
（角度7）显示为复选框。下面我将为
.html
和
.ts
文件添加代码片段

每当我点击一个复选框时，它会被选中，但随后会立即取消选中。我进入了调试模式，当我点击一个复选框时，我的
isSelected（）
方法被Angular调用了4次。当我点击它时，它立即进入选中状态。然后，在Angular调用它的第二次时，它仍然被检查。第三次，它变为未选中（同时
isSelected（）
仍然为true）。我不知道我做错了什么。我尝试的是：


从
isSelected（）
方法切换到类属性（在
myListItem
对象上添加了
isSelected
布尔字段）
在前面的想法的基础上添加了双向绑定
从选中的
切换到
ngModel


没有任何帮助。我不知道还能试什么。请帮帮我

html
代码片段：


类MyListItem{
身份证号码
名称：string
}
//省略注释
导出类MyComponent实现OnInit、OnDestroy{
myList:MyListItem[]=[]//省略了初始化
isSelected（myListItem:myListItem）：布尔值{
返回此.myList.includes（myListItem）
}
切换（myListItem:myListItem）：无效{
//省略了代码，我调试了它，它工作正常：
//它在列表中添加/删除项目
}
}

{{myListItem.name}
我不确定这是否有效，但您可以向切换功能添加一个事件参数

toggle(myListItem: MyListItem, event: any) { event.preventDefault() }

然后在html中：

(click)="toggle(myListItem, $event)"

同样，我不确定这是否有效，但我发现有时这些单击事件会自动发生，除非调用了prevent default（）函数

<mat-checkbox flex="100" (change)="toggle(myListItem)" 
                  [checked]="isSelected(myListItem)">
      {{ myListItem.name }}
    </mat-checkbox>


{{myListItem.name}
以这种方式在stackbitz上发布代码，没有人能帮助尝试使用
（更改）
而不是
（单击）
@Quirimo这也很有效，谢谢，而且在我看来，这是一个更整洁的解决方案@阿森西蒙南：不客气：）只是为未来读者发布了一个答案，这很有效，谢谢，但我会使用@Qurimmo建议的方法-使用（更改）而不是（单击），因为这样更整洁。我理解。很高兴找到了解决办法