Question

我是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;
     }
   }
}

Answer 1

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

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

而不是你可以使用这段代码：

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

详细了解Angular如何更新The mechanics of DOM updates in Angular

中的DOM

我希望这会对你有所帮助。

Angular2 - 使用类绑定来检查数据会产生许多调用

1 个答案: