在Angular中,当我们在数组中推送一些数据后,可以通过改变数组的引用来再次触发ngFor指令。具体的做法是使用数组的slice()方法创建一个新的数组,然后将新数组赋值给原来的数组变量。这样做的好处是Angular会检测到数组的引用发生了变化,从而重新渲染ngFor指令。
以下是一个示例代码:
在组件的类中定义一个数组变量:
dataList: any[] = [];
在模板中使用*ngFor指令渲染数组:
<div *ngFor="let item of dataList">{{ item }}</div>
当需要在数组中推送新数据时,可以使用以下代码:
this.dataList.push(newItem);
this.dataList = this.dataList.slice();
在上述代码中,我们先使用push()方法将新数据推送到数组中,然后通过slice()方法创建一个新的数组,并将其赋值给原来的数组变量dataList。这样就会触发*ngFor指令重新渲染。
需要注意的是,这种方法适用于数组中的数据发生变化的情况,如果是数组本身的引用发生了变化,例如使用了数组的push()、pop()等方法,或者直接将一个新的数组赋值给原来的数组变量,那么*ngFor指令也会重新渲染。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
云+社区技术沙龙[第28期]
云+社区技术沙龙[第9期]
云+社区技术沙龙 [第31期]
云+社区技术沙龙[第8期]
云+社区技术沙龙[第10期]
技术创作101训练营
Elastic 中国开发者大会
Elastic 中国开发者大会
云+社区技术沙龙[第5期]
云+社区技术沙龙[第6期]
第四期Techo TVP开发者峰会
领取专属 10元无门槛券
手把手带您无忧上云