ngFor не обновляет дом полностью - PullRequest
Новая
       14

ngFor не обновляет дом полностью

0 голосов
/ 12 сентября 2018

Я сталкиваюсь со странным поведением при использовании 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 с

Ожидаемое

Заранее спасибо

1 Ответ

0 голосов
/ 12 сентября 2018

Это поведение обновлений Angular shadow DOM.Вы можете изменить свой код следующим образом: 

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