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>

由于某些原因，enitity.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>

TypeScript

TypeScript

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

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

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