使用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个字段。
提前谢谢
答案 0 :(得分:0)
这是Angular shadow DOM更新的行为。您可以这样更改代码:
setTimeout(()=>{
this.testList = ["one", "two", "three", "four", null];
}, 2000)