如何使用复选框锁定按钮？

Question

我有一个复选框，最初应该是不活动的。并且还有一个按钮应该是不活动的。如果复选框处于活动状态，则该按钮也将处于活动状态。反之亦然。

ts：

  disabled: boolean = false;

  changeEvent(event) {
    if (event.target.checked) {
      this.disabled = true;
    }
    else {
      this.disabled = false;
    }
  }

的HTML：

<mat-checkbox color="primary" (change)="changeEvent($event)">
    Disabled
</mat-checkbox>

<button mat-button color="primary" [disabled]="!disabled">Click</button>

Answer 1

您可以使用组件变量来引用复选框本身

<mat-checkbox #disabler color="primary">
    Disabled
</mat-checkbox>

<button mat-button color="primary" [disabled]="disabler.checked">
  Click
</button>