在 Angular 中的（更改）属性之外禁用复选框的使用

Question

我正在创建一个带有 angular 的基于 Web 的应用程序；我在处理复选框和角度时遇到了问题。复选框似乎只“半关心”它们绑定到变量的事实。例如，我有两个复选框。更改后的一个框禁用了第一个复选框。单击时的第一个复选框不应执行任何操作，并保持选中状态。然而，即使第一个复选框调用的函数将绑定变量保持为真；复选框变为未选中状态。这导致我的程序中出现不同数量的其他问题，因为这不是我期望的行为

这是html：

<label><input type="checkbox" [checked]="xChecked" (change)="xChanged()">I'm X</label>

<label><input type"checkbox" [checked]="yChecked" (change)="yChanged()">I'm Y></label>

这是Javascript：

xChanged(){

  this.xChecked = true;

}

yChanged(){

  this.xChecked = false;

}

使用该代码，我预计不单击 y 输入就无法更改“x”输入。实际结果是，虽然 y 输入确实改变了 x 输入，但只需单击 x 输入就会自行改变它。这就是我说 angular 似乎只“半关心”复选框绑定到变量时的意思。

编辑：我认为使用 (click) 而不是 (change) 可能是一个潜在的解决方案，但改变它似乎没有任何区别。

Answer 1

您可以执行以下解决方法：&nbsp; xChecked: boolean;&nbsp; yChecked: boolean;&nbsp; timer: any;&nbsp; xChanged(event){&nbsp; &nbsp; this.timer = window.setTimeout(() => {&nbsp; &nbsp; &nbsp; this.xChecked = true;&nbsp; &nbsp; },0)&nbsp; }&nbsp; yChanged(){&nbsp; &nbsp; this.xChecked = false;&nbsp; }&nbsp; ngOnDestroy() {&nbsp; &nbsp; window.clearTimeout(this.timer);&nbsp; }这确保该值设置在执行队列的末尾（检查此帖子链接）。

Answer 2

最好的事情是如果xChecked是真的禁用第一个复选框。您的 javascript 将是相同的。<mat-checkbox&nbsp;[(ngModel)]="xChecked"&nbsp;[disabled]="xChecked">X&nbsp;me!</mat-checkbox> <mat-checkbox&nbsp;[(ngModel)]="yChecked"&nbsp;(click)="yChanged()">I'm&nbsp;Y!</mat-checkbox>