时间戳

首页 > 解决方案 > ngFor 没有完全更新 dom

angular - ngFor 没有完全更新 dom

问题描述

我在使用 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 个字段。

点击前

单击和 2 秒后

预期的

先感谢您

标签： angularngfor

解决方案

这是 Angular shadow DOM 更新的行为。您可以像这样更改代码：

setTimeout(()=>{
  this.testList = ["one", "two", "three", "four", null];
}, 2000)

推荐阅读