Javascript 为什么在计算函数时要调用输入属性数百次

我使用控件访问的属性来检查字段是否应该启用或禁用

所以我有这样的想法：

<input matInput type="text" #name="ngModel" name="application.name" [ngModel]="application?.name" (ngModelChange)="application.name=$event"
              placeholder="Nom de l'application" required [disabled]="isDisabled([permissions.applications.any.update, permissions.applications.own.update], 'name')"[appUnique]="application" [listElem]="applications" key="name" maxlength="255">

---

最好不要将属性绑定到方法，以避免过于频繁地检查状态

以下是我的建议：

使用RxJS跟踪更改。

• 尝试检测您的权限.应用程序.任何.update更改，并将其包装为可观察的。您可以从组件中的

  ngOnInit

  hook订阅此内容

使用纯管道检测更改。

• 尝试将

  isDisabled

  方法移动到纯管道组件

使用setInterval定期检查状态更改

---

简而言之，您的方法是由角度变化检测算法执行的。Angular扫描每个绑定以检测更改并相应地采取行动，它经常这样做，并且每个事件都可能发生多次。你需要学习如何去做。这是一个很大的主题，在中详细介绍，因此答案不合适，但参考文章中的三个提示是：

拥有更少的DOM。这是拼图中至关重要的一块。如果DOM元素不可见，您应该使用*ngIf将它们从DOM中删除，而不是简单地用CSS隐藏元素。俗话说，最快的代码是没有运行的代码，最快的DOM是不存在的DOM

让你的表达更快。将复杂计算移到ngDoCheck生命周期挂钩中，并在视图中引用计算值。尽可能长时间地将结果缓存到复杂计算中

使用OnPush更改检测策略告知Angular 2没有更改。这使您可以在大部分时间跳过应用程序上的整个更改检测步骤

---

好的，我找到了解决问题的办法， 我预先计算组件端所有字段的状态。 因此，对于用户配置文件，这是我的功能：

 computesFieldsDisableState() {
    this.disabled = {
      thumbnails: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "thumbnails"),
      name: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "name"),
      firstname: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "firstname"),
      password: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "password"),
      email: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "email"),
      roles: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "roles"),
    };
  }

现在我只需要使用

[disabled]=“disabled.thumbnails”

来获取字段的状态

---

谢谢大家的回答。

有一些关于这种行为的好文章：好的，我知道角度循环，但不知道它也适用于属性。Txt。我将找到另一个解决方案来控制输入的禁用状态。如果有人提出建议，greatI认为将东西放入

ngDoCheck

生命周期挂钩不是一个好的选择。这在我的情况下不适用。地位总是一样的。在用户连接上检索权限。我将代码更改为使用添加禁用属性的指令。现在我需要找到一种方法来告诉mat form字段考虑这个更改。即使您使用的是指令，您仍然需要面对更改检测问题。你能分享你的

isDisabled

实现吗？我测试它，指令的onInit中的方法只调用一次。输入获取其禁用属性，但这不适用于视图，因为Mat form字段未检测到机会。我更新我的问题以发布我的directive@Scandinave您的

this.authService.hasPermission（）

是否只需要在组件初始化后执行一次？使用指令时是。

 computesFieldsDisableState() {
    this.disabled = {
      thumbnails: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "thumbnails"),
      name: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "name"),
      firstname: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "firstname"),
      password: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "password"),
      email: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "email"),
      roles: !this.authService.hasPermission([this.permissions.profil.update], this.user.id, "user", "roles"),
    };
  }