Question

我有一个基本上是项目列表的组件，其中每个项目包含一个名称和一行框。像这样的东西（但风格）：John Doe [1] [2] [3] [4] [5] 每个框代表一个任务，每个任务都被批准＆＃34;或＆＃34;未批准＆＃34;。如果它被批准为绿色，那么如果不是那么灰色。每个项目的数据都从一个Element对象传递，该对象还有一个Task对象数组作为其值之一，每个框都附加到一个（单击）侦听器，该侦听器切换task.approved的值和框的颜色因此。

当列表中有很多项目时会出现问题。我用90个项目测试了它，每次我点击一个盒子，它需要300毫秒来改变它的颜色。

我尝试了很多不同的方法来解决这个问题，这是HTML的第一次迭代：

＆＃13;

<md-list>
      <md-list-item *ngFor="let item of testData" class="flex-container">
          <div style="margin-left:10px;"> {{item.firstName + " " + item.lastName}}</div>
          
          <div class="boxes">
              <div *ngFor="let task of item.tasks;"  style="cursor: pointer;" >
                  <div *NgIf="task.approved" class="flex-item box" style="background-color: green;" (click)="task.approved = !task.approved">{{task.taskNumber}}</div>
                  <div *NgIf="!task.approved" class="flex-item box" style="background-color: lightgrey;" (click)="task.approved = !task.approved">{{task.taskNumber}}</div>
              </div>
          </div>            
      </md-list-item>
</md-list>

＆＃13;

TS：

＆＃13;

export class App {
  testData: Element[];
  
  constructor() { }

  ngOnInit() {
    this.testData = [];
    for(var i=0; i<90; i++) {
      this.testData.push({
        id: i,
        firstName: "John" + (i + 1),
        lastName: "Doe",
        tasks: Task[],
      });
      for(var t=0; t<10; t++) {
        this.testData[i].tasks.push(
          {
            taskNumber: t+1,
            approved: (t%2 == 0) ? true: false //for variation sake
          }
        );
      }
      
    }
  }
}

export interface Element {
  id: number;
  firstName: string;
  lastName: string;
  tasks: Task[];
}

export interface Task {
  taskNumber: number;
  approved: boolean;
}

＆＃13;

在此之后我尝试了：

将检测策略更改为onPush。
添加一个按钮，在您单击后将侦听器添加到相应的行
只有一个监听器并使用$ event.target
使用纯CSS处理点击事件并使用此hack更改颜色：Can I have an onclick effect in CSS?

这些都没有在性能方面取得明显进步。我也可以限制列表项的数量，但肯定有不同的方法。

使用事件处理程序渲染大量元素时，Angular 4中的性能不佳

0 个答案: