更改复选框状态后，UI中的状态保持不变

Question

<input type="checkbox" [(ngModel)]="rowData.is_permitted" (change)="changeStatus()">

changeStatus() {
rowData.is_permitted = true;
}

如果我取消选中复选框，但有条件地希望选中该复选框，则该标志会更新，但不会影响UI。

Answer 1

问题显示在this stackblitz中。取消选中该复选框后，代码中的值设置为true，但该复选框保持未选中状态。

---

您可以执行以下操作以通过更改代码来覆盖用户的操作：

• 通过调用ChangeDetectorRef.detectChanges
强制立即进行更改检测
• 将值设置为true
• 让更改检测机制更新复选框以反映更新后的值

在下面的代码中，我处理ngModelChange事件。问题中提到的条件行为是通过keepChecked属性进行仿真的：

<input type="checkbox" 
  [(ngModel)]="rowData.is_permitted" 
  (ngModelChange)="changeStatus()">

changeStatus() {
  if (this.keepChecked) {
    this.changeDetectorRef.detectChanges();
    this.rowData.is_permitted = true;
  }
}

有关演示，请参见this stackblitz。

---

可以通过在setTimeout回调中异步设置值来获得类似的结果：

changeStatus() {
  if (this.keepChecked) {
    setTimeout(() => {
      this.rowData.is_permitted = true;
    });
  }
}

但是我更喜欢通过调用ChangeDetectorRef.detectChanges使代码保持同步。

Answer 2

如果我理解您的问题， 更改输入后，它保持不变。

因此，当rowData.is_permitted为true时，您需要将其设置为false。

rowData.is_permitted是错误的，您需要使其正确。

如果这是您的问题，请尝试通过更改changeStatus函数来实现：

rowData.is_permitted = !rowData.is_permitted;

rowData.is_permitted将获得相反的值。

我从@SunilSingh派生的工作示例是here

Answer 3

您必须在单击时更改ngModel值。可能是rowData.is_permitted的默认值是true，因此单击时它不会被您的功能更改。 您的changeStatus函数将为

changeStatus() {
    rowData.is_permitted = !rowData.is_permitted;
}