NgFor non aggiorna i dati con Pipe in Angular2

In questo scenario, sto visualizzando un elenco di studenti (array) nella vista con ngFor:

<li *ngFor="#student of students">{{student.name}}</li>

È meraviglioso che si aggiorni ogni volta che aggiungo un altro studente all'elenco.

Tuttavia, quando do un pipea filteraccanto al nome dello studente,

<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>

Non aggiorna l'elenco fino a quando non digito qualcosa nel campo del nome dello studente da filtrare.

Ecco un collegamento a plnkr .

Hello_world.html

<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
    <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>

sort_by_name_pipe.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'sortByName'
})
export class SortByNamePipe {

    transform(value, [queryString]) {
        // console.log(value, queryString);
        return value.filter((student) => new RegExp(queryString).test(student.name))
        // return value;
    }
}

Per comprendere appieno il problema e le possibili soluzioni, dobbiamo discutere il rilevamento del cambiamento angolare - per tubi e componenti.

Rilevamento cambio tubo

Tubi apolidi / puri

Per impostazione predefinita, le pipe sono senza stato / pure. Le pipe senza stato / pure trasformano semplicemente i dati di input in dati di output. Non ricordano nulla, quindi non hanno proprietà, solo un transform()metodo. Angular può quindi ottimizzare il trattamento dei tubi stateless / puri: se i loro input non cambiano, i tubi non devono essere eseguiti durante un ciclo di rilevamento delle modifiche. Per una pipe come {{power | exponentialStrength: factor}}, powere factorsono input.

Per questa domanda, "#student of students | sortByName:queryElem.value", studentse queryElem.valuesono ingressi, e tubo sortByNameè stateless / puro. studentsè un array (riferimento).

• Quando viene aggiunto uno studente, il riferimento all'array non cambia students, non cambia, quindi la pipe senza stato / pura non viene eseguita.
• Quando qualcosa viene digitato nell'input del filtro, queryElem.valuecambia, quindi viene eseguita la pipe senza stato / pura.

Un modo per risolvere il problema dell'array è cambiare il riferimento all'array ogni volta che viene aggiunto uno studente, ovvero creare un nuovo array ogni volta che viene aggiunto uno studente. Potremmo farlo con concat():

this.students = this.students.concat([{name: studentName}]);

Sebbene funzioni, il nostro addNewStudent()metodo non dovrebbe essere implementato in un certo modo solo perché stiamo usando una pipe. Vogliamo usare push()per aggiungere al nostro array.

Stateful Pipes

Le pipe con stato hanno uno stato: normalmente hanno proprietà, non solo un transform()metodo. Potrebbe essere necessario valutarli anche se i loro input non sono cambiati. Quando specifichiamo che un pipe è stateful / non puro - pure: false- allora ogni volta che il sistema di rilevamento delle modifiche di Angular controlla un componente per le modifiche e quel componente utilizza un pipe stateful, controllerà l'output del pipe, indipendentemente dal fatto che il suo input sia cambiato o meno.

Questo suona come quello che vogliamo, anche se è meno efficiente, poiché vogliamo che la pipe venga eseguita anche se il studentsriferimento non è cambiato. Se rendiamo semplicemente stateful la pipe, otteniamo un errore:

EXCEPTION: Expression 'students | sortByName:queryElem.value  in HelloWorld@7:6' 
has changed after it was checked. Previous value: '[object Object],[object Object]'. 
Current value: '[object Object],[object Object]' in [students | sortByName:queryElem.value

Secondo la risposta di @ drewmoore , "questo errore si verifica solo in modalità dev (che è abilitata per impostazione predefinita a partire dalla beta-0). Se chiami enableProdMode()durante il bootstrap dell'app, l'errore non verrà generato." I documenti per loApplicationRef.tick() stato:

In modalità sviluppo, tick () esegue anche un secondo ciclo di rilevamento delle modifiche per garantire che non vengano rilevate ulteriori modifiche. Se durante questo secondo ciclo vengono rilevate ulteriori modifiche, le associazioni nell'app hanno effetti collaterali che non possono essere risolti in un singolo passaggio di rilevamento delle modifiche. In questo caso, Angular genera un errore, poiché un'applicazione Angular può avere solo un passaggio di rilevamento delle modifiche durante il quale deve essere completato tutto il rilevamento delle modifiche.

Nel nostro scenario credo che l'errore sia fasullo / fuorviante. Abbiamo una pipe con stato e l'output può cambiare ogni volta che viene chiamato - può avere effetti collaterali e va bene. NgFor viene valutato dopo la pipe, quindi dovrebbe funzionare bene.

Tuttavia, non possiamo davvero sviluppare con questo errore generato, quindi una soluzione alternativa è aggiungere una proprietà di array (cioè, stato) all'implementazione del pipe e restituire sempre quell'array. Vedi la risposta di @ pixelbits per questa soluzione.

Tuttavia, possiamo essere più efficienti e, come vedremo, non avremo bisogno della proprietà array nell'implementazione del pipe e non avremo bisogno di una soluzione alternativa per il rilevamento del doppio cambiamento.

Rilevamento del cambio di componente

Per impostazione predefinita, su ogni evento del browser, il rilevamento delle modifiche angolari passa attraverso ogni componente per vedere se è cambiato: vengono controllati input e modelli (e forse altre cose?).

Se sappiamo che un componente dipende solo dalle sue proprietà di input (e dagli eventi del modello) e che le proprietà di input sono immutabili, possiamo utilizzare la onPushstrategia di rilevamento delle modifiche molto più efficiente . Con questa strategia, invece di controllare ogni evento del browser, un componente viene controllato solo quando cambiano gli input e quando si attivano gli eventi del modello. E, a quanto pare, non otteniamo Expression ... has changed after it was checkedquell'errore con questa impostazione. Questo perché un onPushcomponente non viene controllato di nuovo finché non viene "contrassegnato" ( ChangeDetectorRef.markForCheck()) di nuovo. Quindi le associazioni dei modelli e gli output delle pipe con stato vengono eseguiti / valutati solo una volta. Le pipe senza stato / pure non vengono ancora eseguite a meno che i loro input non cambino. Quindi abbiamo ancora bisogno di un tubo con stato qui.

Questa è la soluzione suggerita da @EricMartinez: stateful pipe con onPushrilevamento delle modifiche. Vedi la risposta di @ caffinatedmonkey per questa soluzione.

Nota che con questa soluzione il transform()metodo non deve restituire ogni volta lo stesso array. Lo trovo un po 'strano però: una pipe con stato senza stato. Pensandoci ancora un po '... la pipe con stato probabilmente dovrebbe sempre restituire lo stesso array. Altrimenti potrebbe essere utilizzato solo con onPushcomponenti in modalità dev.

Quindi, dopo tutto ciò, penso che mi piaccia una combinazione delle risposte di @ Eric e @ pixelbits: pipe stateful che restituisce lo stesso riferimento di array, con onPushrilevamento delle modifiche se il componente lo consente. Poiché la pipe con stato restituisce lo stesso riferimento all'array, la pipe può ancora essere utilizzata con componenti che non sono configurati con onPush.

Plunker

Questo probabilmente diventerà un idioma Angular 2: se un array sta alimentando una pipe e l'array potrebbe cambiare (gli elementi nell'array che è, non il riferimento all'array), dobbiamo usare un pipe con stato.

Come ha sottolineato Eric Martinez nei commenti, l'aggiunta pure: falseal tuo Pipedecoratore e changeDetection: ChangeDetectionStrategy.OnPushal tuo Componentdecoratore risolverà il tuo problema. Ecco un plunkr funzionante. Anche il passaggio a ChangeDetectionStrategy.Always, funziona. Ecco perché.

Secondo la guida angular2 sui tubi :

Le pipe sono senza stato per impostazione predefinita. Dobbiamo dichiarare una pipe come stateful impostando la pureproprietà del @Pipedecoratore su false. Questa impostazione indica al sistema di rilevamento delle modifiche di Angular di controllare l'output di questo tubo ad ogni ciclo, indipendentemente dal fatto che il suo input sia cambiato o meno.

Per quanto riguarda il ChangeDetectionStrategy, di default, tutti i collegamenti vengono controllati ogni singolo ciclo. Quando pure: falseviene aggiunta una pipe, credo che il metodo di rilevamento delle modifiche cambi da da CheckAlwaysa CheckOnceper motivi di prestazioni. Con OnPush, le associazioni per il componente vengono verificate solo quando una proprietà di input cambia o quando viene attivato un evento. Per ulteriori informazioni sui rilevatori di modifiche, una parte importante di angular2, controllare i seguenti collegamenti:

• Rilevamento delle modifiche in angolare 2
• https://github.com/angular/angular/issues/4746
• Il rilevamento delle modifiche ha reinventato Victor Savkin

Demo Plunkr

Non è necessario modificare ChangeDetectionStrategy. L'implementazione di una pipe con stato è sufficiente per far funzionare tutto.

Questa è una pipe con stato (non sono state apportate altre modifiche):

@Pipe({
  name: 'sortByName',
  pure: false
})
export class SortByNamePipe {
  tmp = [];
  transform (value, [queryString]) {
    this.tmp.length = 0;
    // console.log(value, queryString);
    var arr = value.filter((student)=>new RegExp(queryString).test(student.name));
    for (var i =0; i < arr.length; ++i) {
        this.tmp.push(arr[i]);
     }

    return this.tmp;
  }
}

Dalla documentazione angolare

Tubi puri e impuri

Esistono due categorie di pipe: pure e impure. I tubi sono puri per impostazione predefinita. Ogni pipa che hai visto finora è stata pura. Rendi impuro un tubo impostando la sua bandiera pura su falso. Potresti rendere il FlyingHeroesPipe impuro in questo modo:

@Pipe({ name: 'flyingHeroesImpure', pure: false })

Prima di farlo, comprendi la differenza tra puro e impuro, iniziando con una pipa pura.

Tubi puri Angular esegue un pipe puro solo quando rileva una modifica pura al valore di input. Una modifica pura è una modifica a un valore di input primitivo (String, Number, Boolean, Symbol) o un riferimento a un oggetto modificato (Date, Array, Function, Object).

Angular ignora i cambiamenti all'interno degli oggetti (compositi). Non chiamerà una pipe pura se si modifica un mese di input, si aggiunge a un array di input o si aggiorna la proprietà di un oggetto di input.

Questo può sembrare restrittivo ma è anche veloce. Un controllo del riferimento a un oggetto è veloce, molto più veloce di un controllo approfondito delle differenze, quindi Angular può determinare rapidamente se può saltare sia l'esecuzione del pipe che un aggiornamento della vista.

Per questo motivo, un pipe puro è preferibile quando puoi convivere con la strategia di rilevamento delle modifiche. Quando non puoi, puoi usare il tubo impuro.

Invece di fare puro: falso. Puoi copiare e sostituire il valore nel componente con this.students = Object.assign ([], NEW_ARRAY); dove NEW_ARRAY è l'array modificato.

Funziona per l'angolo 6 e dovrebbe funzionare anche per altre versioni angolari.

Una soluzione alternativa: importare manualmente Pipe nel costruttore e chiamare il metodo di trasformazione utilizzando questa pipe

constructor(
private searchFilter : TableFilterPipe) { }

onChange() {
   this.data = this.searchFilter.transform(this.sourceData, this.searchText)}

In realtà non hai nemmeno bisogno di una pipa

Aggiungi a pipe un parametro extra e modificalo subito dopo la modifica dell'array, e anche con pipe puro, l'elenco verrà aggiornato

lasciare articolo di articoli | Tubo: param

In questo caso di utilizzo ho utilizzato il mio file Pipe in ts per il filtraggio dei dati. È molto meglio per le prestazioni rispetto all'utilizzo di tubi puri. Usa in ts come questo:

import { YourPipeComponentName } from 'YourPipeComponentPath';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

creare tubi impuri è costoso in termini di prestazioni. quindi non creare tubi impuri, ma piuttosto modificare il riferimento della variabile dati creando una copia dei dati quando cambiano i dati e riassegnare il riferimento della copia nella variabile dati originale.

            emp=[];
            empid:number;
            name:string;
            city:string;
            salary:number;
            gender:string;
            dob:string;
            experience:number;

            add(){
              const temp=[...this.emps];
              const e={empid:this.empid,name:this.name,gender:this.gender,city:this.city,salary:this.salary,dob:this.dob,experience:this.experience};
              temp.push(e); 
              this.emps =temp;
              //this.reset();
            }