Question

我有一个Angular2（2.4.0）应用程序，它在ngFor循环中显示一个列表，我注意到每次移动鼠标时，列表都会被重新渲染。有没有其他人注意到类似的行为和/或知道为什么会这样？

正在重新渲染的表：

<table class="responsive-table bordered highlight">
  <tbody>
    <tr *ngFor="let person of getPersons()">
      <td>{{person.name}}</td>
    </tr>
  </tboby>
</table>

我在getPersons（）中添加了一个console.log语句，并且每次鼠标移动都会记录它。

Answer 1

使用返回对象数组的方法是非常糟糕的解决方案。您应该迭代静态数组或使用管道（这取决于具体情况）。

尝试在构造函数（或 ngOnInit 方法）中调用您的函数，例如：

在您的TypeScript文件中：

@Component({
    selector: 'some-selector',
    templateUrl: 'template.html'
})
export class SomeComponent {

   someArray: any[];

   ngOnInit() {
      this.someArray = getPersons();
   } 

   getPersons() {
      //some code...
   }
}

并在您的HTML文件（ template.html ）中：

<tr *ngFor="let obj of someArray">
...
</tr>

Angular2在每次鼠标移动时重新渲染

1 个答案: