首页 文章

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

提问于
浏览 次
0

我是Angular 2（和StackOverflow）的新手，可能会以不恰当的方式使用类绑定 . 我想和专家核实一下 .

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

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

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

这样做的原因在于，如果找到用户，该类确实会发生变化 .

However I’m finding each item is making 3 calls to checkUser whenever the ngFor loop updates. 我无法弄清楚为什么会发生这种情况以及是否应该发生这种情况 .

我很可能做错了什么，并且会感激任何建议 . 谢谢！

@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 回答

  • 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如何更新DOM的信息The mechanics of DOM updates in Angular

    我希望这能帮到您 .

    回复于

相关问题