Come utilizzare trackBy con ngFor

Non ho ben capito cosa dovrei tornare da trackBy. Sulla base di esempi tratti ho visto sul web, mi deve restituire il valore di alcune proprietà dell’oggetto. È corretto? Perché ricevo indice come parametro?

Per esempio, nel seguente caso:

constructor() {
    window.setInterval(() => this.users = [
            {name: 'user1', score: Math.random()},
            {name: 'user2', score: Math.random()}],
        1000);
}

userByName(index, user) {
    return user.name;
}

...

<div *ngFor="let user of users; trackBy:userByName">{{user.name}} -> {{user.score}}</div>

Gli oggetti visualizzati nel modello sono ancora aggiornati, nonostante il nome, è rimasto invariato. Perché?

hai provato a scrivere let user of users; let index=index; trackBy:userByName(index,user) ?
è possibile indice di rendimento, che sarà unico per ogni elemento.
Non riesco a capire. Si può elaborare? Con un esempio forse?
Cosa non hai capito? potreste dirmi, per favore. Ti ho detto di tornare indice.
Non capisco come si fa il confronto, il meccanismo di ngFor sta lavorando dove ngTrackBy venire in

OriginaleL’autore Max Koretskyi aka Wizard | 2017-02-08

2 Replies
  1. 15

    Su ogni ngDoCheck attivato per il ngForOf direttiva Angolare verifica quali oggetti sono stati modificati. Utilizza differisce per questo processo e differiscono utilizza trackBy funzione per confrontare l’oggetto corrente con uno nuovo. L’impostazione predefinita trackBy funzione di tracce di elementi dell’identità:

    const trackByIdentity = (index: number, item: any) => item;
    

    Riceve l’elemento corrente e deve restituire un valore. Quindi il valore restituito dalla funzione viene confrontato con il valore di ritorno della funzione l’ultima volta. Se il valore cambia, i diversi rapporti di un cambiamento. Quindi, se la funzione di default restituisce riferimenti a un oggetto, esso non corrisponde l’elemento corrente se l’oggetto di riferimento è cambiato. Così è possibile fornire il vostro personalizzato trackBy funzione che consente di tornare qualcos’altro. Per esempio, alcune chiavi di valore dell’oggetto. Se questo valore corrisponde a quello precedente, quindi Angolare non rileva la modifica.

    La sintassi ...trackBy:userByName non è più supportato. Si deve ora fornire una funzione di riferimento. Qui è un esempio di base:

    setInterval( () => {
      this.list.length = 0;
      this.list.push({name: 'Gustavo'});
      this.list.push({name: 'Costa'});
    }, 2000);
    
    @Component({
      selector: 'my-app',
      template: `
       <li *ngFor="let item of list; trackBy:identify">{{item.name}}</li>
      `
    })
    export class App {
      list:[];
    
      identify(index, item){
         return item.name; 
      }
    

    Anche se il riferimento all’oggetto di modifiche, il DOM non è aggiornato. Qui è il plunker. Se siete curiosi di sapere come ngFor opere sotto il cofano, leggere questa risposta.

    Posso usare la stessa trackByFn per 2 cicli?
    se la funzione è puro, cioè semplicemente restituisce il risultato in base agli input, non vedo perché non si può

    OriginaleL’autore Max Koretskyi aka Wizard

Lascia un commento