Angular ngFor没有完全更新dom
使用ngFor时,我面临一种奇怪的行为: 一般用法:我有一个文本列表存储在我的后端。用户可以显示此列表,并获取ngFor生成的列表,其中的值预设为列表内容。此外,他可以编辑文本并将更新后的文本发送到后端。后端将更新整个列表,并向所有客户端发送通知。如果其中一个客户机正在显示更新的列表,它将再次获取该列表,以便该列表是最新的。这在任何情况下都会发生在编辑器身上,因此对编辑器没有特殊的威胁 也许我的方法不是最好的,但问题是不同的: 新列表异步到达并得到更新。问题是用于编辑的文本将被向下推。当后端具有正确的列表以及新获取的列表正确到达客户端时,列表未正确显示。它必须有显示/更改检测问题 我尝试了按功能划分的曲目,但没有成功 最简单的工作示例:Angular ngFor没有完全更新dom,angular,ngfor,Angular,Ngfor,使用ngFor时,我面临一种奇怪的行为: 一般用法:我有一个文本列表存储在我的后端。用户可以显示此列表,并获取ngFor生成的列表,其中的值预设为列表内容。此外,他可以编辑文本并将更新后的文本发送到后端。后端将更新整个列表,并向所有客户端发送通知。如果其中一个客户机正在显示更新的列表,它将再次获取该列表,以便该列表是最新的。这在任何情况下都会发生在编辑器身上,因此对编辑器没有特殊的威胁 也许我的方法不是最好的,但问题是不同的: 新列表异步到达并得到更新。问题是用于编辑的文本将被向下推。当后端具有
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<div *ngFor="let i of testList">
<input type="text" [value]="i">
</div>
<button (click)="onClick()">Click</button>`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'test-app';
testList = ["one", "two", "three", "", ""];
onClick()
{
setTimeout(()=>{
this.testList = ["one", "two", "three", "four", ""];
}, 2000)
}
}
在第四个文本字段中写入内容,然后按下按钮。2秒钟后,文本应移到第5个字段
提前感谢这是角度阴影DOM更新的行为。您可以按如下方式更改代码:
setTimeout(()=>{
this.testList = ["one", "two", "three", "four", null];
}, 2000)
Angular为组件提供的双绑定功能。因此,如果后端的列表是这样的:[1,2,3,4,5]只需执行如下操作:subscribe evt=>this.testList=evt;数据将被更新,但这不正是我在示例中模拟的超时吗?在我对答案的评论中的解决方案。第一次出现此问题后,我尝试了一些解决方案,但很快就解决了,因为它并不重要。在我创建了这个最小的示例之后,我尝试了更多,并找到了解决方案: