在 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

您可以执行以下解决方法：

  xChecked: boolean;

  yChecked: boolean;

  timer: any;

  xChanged(event){

    this.timer = window.setTimeout(() => {

      this.xChecked = true;

    },0)

  }

  yChanged(){

    this.xChecked = false;

  }

  ngOnDestroy() {

    window.clearTimeout(this.timer);

  }

这确保该值设置在执行队列的末尾（检查此帖子链接）。

Answer 2

最好的事情是如果xChecked是真的禁用第一个复选框。您的 javascript 将是相同的。

<mat-checkbox [(ngModel)]="xChecked" [disabled]="xChecked">X me!</mat-checkbox>
<mat-checkbox [(ngModel)]="yChecked" (click)="yChanged()">I'm Y!</mat-checkbox>