TrackBy

trackBy orqali noyob kalitga ega narsalarni aniqlash orqali ro‘yxatlarni tez va barqaror saqlang.

*ngFor bilan TrackBy nima?

• Angular massiv elementlarini qanday aniqlashini belgilaydi.
• Elementlar ko‘chirilganda, qo‘yilganda yoki olib tashlanganda DOM tugunidan qayta foydalanishni yoqadi.
• Odatda har bir element uchun noyob identifikatorni qaytaradi.

TrackBy-dan qachon foydalanish kerak

• Tez-tez qayta tartiblanadigan, qo‘shiladigan yoki olib tashlanadigan massivlar.
• Keraksiz qayta ishlashni oldini olish va unumdorlikni yaxshilash uchun.
• Elementlar barqaror, noyob identifikatorlarga ega bo‘lganda.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

type Item = { id: number; name: string };

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)="shuffle()">Shuffle</button>
    <ul>
      <li *ngFor="let it of items; trackBy: trackById">{{ it.id }} - {{ it.name }}</li>
    </ul>
  `
})
export class App {
  items: Item[] = [
    { id: 1, name: 'Alpha' },
    { id: 2, name: 'Beta' },
    { id: 3, name: 'Gamma' }
  ];
  shuffle() {
    this.items = [...this.items].reverse();
  }
  trackById(_i: number, it: Item) { return it.id; }
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• *ngFor ... trackBy: trackById: Ro‘yxat tartibi o‘zgarganda Angular DOM tugunlaridan qayta foydalanishi uchun har bir elementga barqaror identifikatsiyani berish uchun trackById-dan foydalanadi.
• trackById(indeks, element): Element uchun yagona kalitni qaytaradi. Bu yerda index dan qat’iy nazar item.id qaytaradi.
• shuffle(): trackBy yordamida Angular mavjud DOM tugunlarini yo‘q qilish va qayta yaratish o‘rniga ularni siljitishini ko‘rsatish uchun massivni teskari o‘zgartiradi.