时间戳

首页 > 解决方案 > [disabled] 中的函数在注册切换更改之前被触发

angular - [disabled] 中的函数在注册切换更改之前被触发

问题描述

在我的应用程序中，当组没有更改时，我需要禁用一个按钮。每个组由一些位置和一个布尔值组成returnHome。我也有原始的一组位置和原始的returnHome切换设置。以下是它们的组合方式：

为 returnHome 切换滑块 HTML：

<mat-slide-toggle [(ngModel)]="returnHome" (change)="onToggleReturnHome(returnHome)"></mat-slide-toggle>

按钮 HTML：

<button id="save-locations" mat-raised-button color="primary"
      [disabled]="hasGroupChanged()">
  Save Group
</button>

检查组中更改的功能：

hasGroupChanged() {
  // To detect returnHome toggle change
  if(this.returnHome != this.originalReturnHome) {
    return true;
  }

  // Code to check if locations of the group have been changed
  // ...
}

现在，当我滑动切换开关时，我希望returnHome它会被更新，一旦它通过 [disabled] 进入hasGroupChanged()，它会检查它returnHome是否不再与originalReturnHome返回相同，从而true禁用按钮。

onToggleReturnHome()但是，当我在and上放置断点时hasGroupChanged()，只要我点击它，hasGroupChanged()就会首先出现并且不识别 thereturnHome已更新。因此，按钮永远不会通过切换启用。

我怎样才能确保onToggleReturnHome()先触发hasGroupChanged()呢？考虑到 Angular 执行流程，这甚至可能吗？如果没有，我如何确保按钮可以正确禁用/启用？

标签： angulartypescript

解决方案

首先，除非你真的必须这样做，否则不要将你的属性与函数挂钩，因为即使没有任何更改，它也会重新渲染，你可以将它挂钩到组件中的变量，并且更改将被拾取通过角度（默认行为），您可以提供功能“onToggleReturnHome”吗？

推荐阅读