触发布尔值的间歇性错误

Question

我编写了一些非常简单的代码，可以跟踪8个布尔值，并根据它们的值更改一些UI代码。如果有一个布尔值都没有设置为true，那么我有一个要禁用的按钮，如果其中任何一个都设置为启用，则该按钮将变为启用状态。

代码有效，但是确实存在一个怪异的间歇性错误，有时如果我将所有布尔值都关闭，按钮将保持启用状态。我一直在检查控制台，有时其中一个布尔值无法正确关闭。

没有布尔值的模式，它总是不同的。有时候，如果我缓慢地切换它们，有时又很快，就会发生这种情况。我正在尝试查找原因，但是在我的代码中看不到任何原因。一切都匹配起来。

HTML
<div class="flex-card-container pt-2">
      <app-prop-card [data]="propAspect" (click)="toggleProp('aspect')"></app-prop-card>
      <app-prop-card [data]="propCost" (click)="toggleProp('cost')"></app-prop-card>
      <app-prop-card [data]="propEyeTech" (click)="toggleProp('eyeTech')"></app-prop-card>
      <app-prop-card [data]="propMounting" (click)="toggleProp('mounting')"></app-prop-card>
      <app-prop-card [data]="propPanelType" (click)="toggleProp('panelType')"></app-prop-card>
      <app-prop-card [data]="propRefresh" (click)="toggleProp('refresh')"></app-prop-card>
      <app-prop-card [data]="propResolution" (click)="toggleProp('resolution')"></app-prop-card>
      <app-prop-card [data]="propWidth" (click)="toggleProp('width')"></app-prop-card>
    </div>

<div class="button-container flex-center-center mt-3">
    <button mat-flat-button class="continue-button"
            (click)="onSubmit()" [disabled]="!canContinue">Continue</button>
  </div>

JS
export class PropSelectorComponent implements OnInit {

  propSelection: PropSelection;
  canContinue = false;

  constructor() { }

  ngOnInit(): void {
    this.propSelection = {
      isAspectSelected: false,
      isCostSelected: false,
      isEyeTechSelected: false,
      isMountingSelected: false,
      isPanelTypeSelected: false,
      isRefreshSelected: false,
      isResolutionSelected: false,
      isWidthSelected: false
    }
  }

  toggleProp(prop: string){
    switch(prop){
      case 'aspect':
        this.propSelection.isAspectSelected = !this.propSelection.isAspectSelected;
        console.log("aspect: ", this.propSelection.isAspectSelected);
        break;
      case 'cost':
        this.propSelection.isCostSelected = !this.propSelection.isCostSelected;
        console.log("cost: ", this.propSelection.isCostSelected);
        break;
      case 'eyeTech':
        this.propSelection.isEyeTechSelected = !this.propSelection.isEyeTechSelected;
        console.log("eye: ", this.propSelection.isEyeTechSelected);
        break;
      case 'mounting':
        this.propSelection.isMountingSelected = !this.propSelection.isMountingSelected;
        console.log("mount: ", this.propSelection.isMountingSelected);
        break;
      case 'panelType':
        this.propSelection.isPanelTypeSelected = !this.propSelection.isPanelTypeSelected;
        console.log("panelType: ", this.propSelection.isPanelTypeSelected);
        break;
      case 'refresh':
        this.propSelection.isRefreshSelected = !this.propSelection.isRefreshSelected;
        console.log("refresh: ", this.propSelection.isRefreshSelected);
        break;
      case 'resolution':
        this.propSelection.isResolutionSelected = !this.propSelection.isResolutionSelected;
        console.log("resolution: ", this.propSelection.isResolutionSelected);
        break;
      case 'width':
        this.propSelection.isWidthSelected = !this.propSelection.isWidthSelected;
        console.log("width: ", this.propSelection.isWidthSelected);
        break;
    }
    this.checkCanContinue();
    console.log(this.propSelection);
  }

  checkCanContinue = () => {
    let toReturn = this.propSelection.isWidthSelected ||
      this.propSelection.isResolutionSelected ||
      this.propSelection.isRefreshSelected ||
      this.propSelection.isPanelTypeSelected ||
      this.propSelection.isMountingSelected ||
      this.propSelection.isCostSelected ||
      this.propSelection.isAspectSelected ||
      this.propSelection.isEyeTechSelected;
    this.canContinue = toReturn;
    console.log("Can continue: ", this.canContinue)
  }
}