Angular2 - 使用类绑定来检查数据会创建许多调用答案

【问题标题】：Angular2 - using class binding to check data creates many callsAngular2 - 使用类绑定来检查数据会创建许多调用
【发布时间】：2017-09-07 03:03:26
【问题描述】：

我是 Angular 2（和 StackOverflow）的新手，可能以不恰当的方式使用类绑定。我想咨询专家。

我有一个 ngFor 循环，它显示来自多个对象的数组的数据。每个对象中都有一个用户数组。如果用户已登录，我想更改每个数据项的类。

在下面的示例中，我只是将用户硬编码为公共变量。

在我的 ngFor 循环中，我从类绑定中调用一个函数（“checkUser”）并传入当前数据项。函数 checkUser 将在数据项中搜索登录用户并返回 true 或 false。如果返回 true，它将将该项目的类设置为活动。如果为 false，则该类保持默认为非活动状态。

如果找到用户，该类确实会发生变化。

但是，每当 ngFor 循环更新时，我发现每个项目都会对 checkUser 进行 3 次调用。我无法弄清楚为什么会发生这种情况以及它是否应该正在发生。

很可能我做错了什么，如果有任何建议，我将不胜感激。谢谢！

@Component({
  template: `
    <div class = "inactive" *ngFor = "let data of exampleData"
        [class.active] = "checkUser(data)">
        {{data.desc}}
    </div>
    `,
  styles: [`
    .inactive {
      color: grey;
    }
    .active {
      color: red;
    }
  `]
})

export class ClassTestComponent {

  public user = 'Bob';
  public exampleData: Array<any> = [{
        _id: '0',
        desc: 'The user is tied to this data',
        users: ['Bob', 'Jim']
      },
      {
         _id: '1',
         desc: 'The user is not tied to this data',
         users: ['Sue', 'May']
       }];

  checkUser(data): boolean {

    if (data.users.includes(this.user)) {
        console.log('user in array');
        return true;
     } else {
        console.log('user not in array');
        return false;
     }
   }
}

【问题讨论】：

标签： angular ngfor

【解决方案1】：

您在元素上应用类的方式是降低应用程序的性能。我们应该避免从视图中调用函数。

函数 checkUser(data) 函数将在每次 Angular 为组件运行更改检测时调用（更准确地说是由 ngFor 创建的嵌入式视图）。这是因为更新 DOM 是变更检测的一部分，Angular 需要调用 checkUser 来了解用于 DOM 更新的值。并且变更检测周期可以经常运行。

您可以使用以下代码代替：

<div *ngFor="let data of exampleData" [ngClass]="(data.users.indexOf(user) > -1 ) ? 'active' : 'inactive'">
{{data.desc}}

在The mechanics of DOM updates in Angular 中阅读更多关于 Angular 如何更新 DOM 的信息

希望对你有帮助。

【讨论】：