在 UI 中更改复选框状态时保持不变答案

【问题标题】：On change of checkbox state remain same in UI在 UI 中更改复选框状态时保持不变
【发布时间】：2019-04-20 08:11:48
【问题描述】：

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

changeStatus() {
rowData.is_permitted = true;
}

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

【问题讨论】：

【解决方案1】：

问题在this stackblitz 中显示。取消选中复选框后，代码中的值设置为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 来保持代码同步。

【讨论】：

【解决方案2】：

如果我理解你的问题，更改输入后，它仍然是 true。

所以，当rowData.is_permitted 为真时，您需要将其设为假。

rowData.is_permitted 为假，您需要将其设为真。

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

rowData.is_permitted = !rowData.is_permitted;

rowData.is_permitted 会得到相反的值。

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

【讨论】：

【解决方案3】：

您必须在点击时更改 ngModel 值。可能是rowData.is_permitted 默认值是true 所以，点击它不会被你的函数改变。您的 changeStatus 函数将是

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

【讨论】：