Блог

Главная - Вопросы по программированию - `ngFor` создает больше элементов

`ngFor` создает больше элементов

#angular #dom #ngfor

#angular #dom #ngfor

Вопрос:

Я использую Angular 10 и *ngFor директиву для создания списка элементов. Всякий раз, когда изменяется входной массив, я что-то делаю с элементом. Например:

 ngAfterViewInit() {
  this.elements.changes.subscribe(t => {
    this.loadElementInfos();
  })
}

Если я устанавливаю break-point внутри функции, иногда я вижу, что *ngFor на самом деле добавляет новые элементы в список, а затем отбрасывает старые элементы.

например:

 old-element-0
old-element-1
old-element-2
old-element-3
new-element-0
new-element-1
new-element-2
new-element-3

И миллисекундой позже старые элементы отбрасываются. Есть ли какой-либо шанс контролировать это поведение ngFor , чтобы не делать этого?

 new-element-0
new-element-1
new-element-2
new-element-3

Комментарии:

1. действительно зависит от того, что вы делаете в этой функции и как выглядят объекты, но обычно вы можете управлять этим с помощью trackBy предложения

Ответ №1:

Если нам нужно в какой-то момент изменить данные в коллекции, Angular необходимо удалить все DOM элементы, связанные с данными, и создать их снова. Это означает много DOM манипуляций, особенно в случае большой коллекции, и, как мы знаем, DOM манипуляции стоят дорого.

Вы можете помочь Angular отслеживать, какие элементы добавлены или удалены, предоставив trackBy функцию, подобную этой:

app.component.ts

 import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `./my-app.html`,
})
export class App {
  collection = any[];
  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }

  trackByFn(index, item) {
    return index;
  }
}

app.component.html

 <ul>
 <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
</ul>

Для большего понимания смотрите эту полезную статью: Повышение производительности с помощью trackBy