Для чего используется связка ngFor
и trackBy
?
Связка ngFor
и trackBy
в Angular используется для эффективного отображения списков данных и управления обновлениями элементов списка при изменении данных. ngFor
используется для итерации по массиву или коллекции и создания дубликатов шаблона для каждого элемента списка. trackBy
позволяет оптимизировать процесс обновления элементов списка путем идентификации уникальных ключей для каждого элемента.
Когда используется ngFor
без trackBy
, Angular по умолчанию сравнивает элементы списка по ссылке, чтобы определить, какие элементы были изменены и требуют обновления в DOM. Однако, при работе с большими списками или при изменении элементов списка, это может привести к ненужным перерисовкам и потере производительности.
Вот пример использования ngFor
и trackBy
:
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>
import { Component } from '@angular/core'
interface Item {
id: number
name: string
}
@Component({
selector: 'app-list',
template: `
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>
`
})
export class ListComponent {
items: Item[] = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
trackByFn(index: number, item: Item): number {
return item.id // Возвращаем уникальный ключ элемента
}
}
В приведенном примере у нас есть список items
, состоящий из объектов Item
. Мы используем ngFor
для итерации по списку и создания элементов списка. В качестве аргумента trackBy
мы передаем функцию trackByFn
, которая возвращает уникальный ключ элемента (item.id
). Этот ключ будет использоваться Angular для отслеживания изменений элементов списка.
Использование trackBy
позволяет Angular сравнивать элементы списка по их уникальному ключу, а не по ссылке объекта. Это позволяет снизить количество перерисовок элементов списка и повысить производительность при изменении данных.
Таким образом, использование связки ngFor
и trackBy
позволяет оптимизировать отображение списков данных в Angular приложении и сделать его более эффективным.