mat-checkbox 不检查条件是否为假(仅在双击时) [英] mat-checkbox does not check if condition is false (only on double click)

问题描述

我有一个实体，它有一个需要与复选框状态相反的变量.

I have an entity that has a variable that needs to be the opposite of the checkbox state.

enitity.enabled = true

复选框用于标记为删除"；项目.如果您标记并发送表单，则标记的项目将被软删除.

The checkbox is there to "mark to delete" the item. If you mark and send the form, the item marked is soft deleted.

考虑到这一点，复选框是这样的:

With this in mind, the checkbox is exactly like this:

<mat-checkbox [(ngModel)]="!entity.enabled">{{!entity.enabled}}</mat-checkbox>

出于某种原因，enity.enabled 值仅在第二次点击时才会更改.

For some reason, the enitity.enabled value is only changed when the second click applies.

我找了很多解决方案，或者如果这是一个错误，没有找到我来这里寻求您的帮助.

I looked a lot for a solution or if this is a bug, nothing found I came here for your help.

知道如何解决这个问题吗?

Any idea how to fix this issue?

示例在这里

推荐答案

您不能在 ngModel 中使用否定运算符.

You cannot use the negation operator with ngModel.

<mat-checkbox [(ngModel)]="entity.enabled">{{!entity.enabled}}</mat-checkbox>

试试这个方法.

另一种方法是对点击或更改事件做出反应

Another approach is to react on the click- or change-event

HTML

<mat-checkbox [checked]="entity.enabled" (change)="onChange()">{{!entity.enabled}}</mat-checkbox>

打字稿

private onChange(): void {
   this.entity.enabled = !this.entity.enabled;
}

private onClick(): void {
  this.entity.enabled = !this.entity.enabled;
}

这篇关于mat-checkbox 不检查条件是否为假(仅在双击时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！