如何防止：ngFor 在任何点击事件上重新渲染

如何解决如何防止：ngFor 在任何点击事件上重新渲染

因此，每当我调用/单击 unRelatedFunction() 时，它都会使 ngFor 循环再次重新渲染。有什么办法可以避免这种不需​​要的连接？我使用的是 Angular 12。

如果我遗漏了任何必需的信息，请告诉我。谢谢

//html

<div *ngFor="let item of arr">{{ create(item) }}</div>

<button type="button" (click)="unRelatedFunction()">test</button>

//ts

   arr = [1,2,3,4,5,6,7];

   create(val) {
    console.log("again ?");
    return val + 1
  }

  unRelatedFunction() {
    console.log("test");
  }

解决方法

您可以使用trackBy

HTML

*ngFor=“let item of arr; trackBy: value”

TS

value(index,item){
  return item;
}

detailed explanation here

,

Amit，一般来说，将函数用于 *ngFor 是个坏主意。更好的方法是创建一个新对象或向我们的对象数组添加一个新属性并显示这些属性。

arr = [1,2,3,4,5,6,7]; //<--your original array
arrNew=this.arr.map(x=>({value:x,property:this.create(x))) //<--a new array of object

<!--iterate over arrNew-->
<div *ngFor="let item of arrNew">{{ item.property }}</div>

看到了，这样一来，函数只调用了这么多次元素就有数组

如果我们有一个对象数组

arr = [{id:1},{id:2},{id:3},{id:4}]; //<--your original array

我们可以，在 ngOnInit

//or add a new property   
this.arr.forEach(x=>{
    x.property=this.create(x.id)
}

//or create a new array with all the properties of x (using spread operator)
//and a new property
this.arrNew=this.arr.map(x=>({...x,property:this.create(x.id)))

,

这是 Angular 中的默认更改检测，它比较浏览器事件前后模板表达式的值，以查看是否有更改。 我可以在这里建议不要强制避免 Angular 的这种同步功能。 我想你很担心，因为 create() 在点击这个 unRelatedFunction() 后正在调用。我不确定为什么需要在 for 循环中使用 Create()，请详细说明您将在 Create() 中执行的操作，以便我可以建议任何替代解决方案。

谢谢 拉杰什