NgFor nie aktualizuje danych za pomocą Pipe w Angular2

W tym scenariuszu wyświetlam listę uczniów (tablicę) do widoku z ngFor:

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

To wspaniałe, że aktualizuje się za każdym razem, gdy dodam innego ucznia do listy.

Jednak, gdy daję się pipedo filtero imieniu studenta,

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

Nie aktualizuje listy, dopóki nie wpiszę czegoś w filtrującym polu nazwiska ucznia.

Oto link do 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;
    }
}

Aby w pełni zrozumieć problem i możliwe rozwiązania, musimy omówić wykrywanie zmian kątowych - dla rur i komponentów.

Wykrywanie zmian rur

Rury bezpaństwowe / czyste

Domyślnie potoki są bezstanowe / czyste. Potoki bezstanowe / czyste po prostu przekształcają dane wejściowe w dane wyjściowe. Nic nie pamiętają, więc nie mają żadnych właściwości - tylko transform()metoda. Angular może zatem zoptymalizować traktowanie rur bezstanowych / czystych: jeśli ich dane wejściowe się nie zmieniają, rury nie muszą być wykonywane podczas cyklu wykrywania zmian. W przypadku rur takich jak {{power | exponentialStrength: factor}}, powerifactor są wejściami.

W przypadku tego pytania "#student of students | sortByName:queryElem.value", studentsiqueryElem.value to wejścia, a przewód sortByNamejest bezstanowy / czystego. studentsjest tablicą (odniesieniem).

• Po dodaniu ucznia tablica odwołanie nie zmienia się -students nie zmienia się - dlatego potok bezstanowy / czysty nie jest wykonywany.
• Kiedy coś jest wpisane na wejściu filtru, queryElem.valuezmienia się, dlatego wykonywany jest potok bezstanowy / czysty.

Jednym ze sposobów rozwiązania problemu z tablicą jest zmiana odwołania do tablicy za każdym razem, gdy dodawany jest uczeń, tj. Tworzenie nowej tablicy za każdym razem, gdy dodawany jest uczeń. Moglibyśmy to zrobić za pomocą concat():

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

Chociaż to działa, nasz addNewStudent() metoda nie powinna być implementowana w określony sposób tylko dlatego, że używamy potoku. Chcemy push()dodać do naszej tablicy.

Stateful Pipes

Rury stanowe mają stan - zwykle mają właściwości, a nie tylko transform()metodę. Mogą wymagać oceny, nawet jeśli ich dane wejściowe nie uległy zmianie. Kiedy określimy, że potok jest stanowy / nieczysty -pure: false - wtedy za każdym razem, gdy system wykrywania zmian Angulara sprawdza komponent pod kątem zmian i ten komponent używa potoku stanowego, sprawdza wyjście potoku, czy jego wejście uległo zmianie, czy nie.

Brzmi to tak, jak chcemy, nawet jeśli jest mniej wydajne, ponieważ chcemy, aby potok był wykonywany, nawet jeśli studentsodniesienie nie uległo zmianie. Jeśli po prostu sprawimy, że potok będzie stanowy, otrzymamy błąd:

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

Zgodnie z odpowiedzią @ drewmoore , „ten błąd występuje tylko w trybie programisty (który jest domyślnie włączony od wersji beta-0). Jeśli zadzwonisz enableProdMode()podczas ładowania aplikacji, błąd nie zostanie zgłoszony”. Dokumenty dotycząceApplicationRef.tick() stanu:

W trybie programowania tick () wykonuje również drugi cykl wykrywania zmian, aby zapewnić, że żadne dalsze zmiany nie zostaną wykryte. Jeśli w tym drugim cyklu zostaną wykryte dodatkowe zmiany, powiązania w aplikacji mają skutki uboczne, których nie można rozwiązać w pojedynczym przebiegu wykrywania zmian. W takim przypadku Angular zgłasza błąd, ponieważ aplikacja Angular może mieć tylko jeden przebieg wykrywania zmiany, podczas którego musi zostać zakończone wszystkie wykrywanie zmian.

W naszym scenariuszu uważam, że błąd jest fałszywy / wprowadzający w błąd. Mamy potok stanowy i wyjście może się zmieniać za każdym razem, gdy jest wywoływane - może mieć efekty uboczne i to jest w porządku. NgFor jest oceniane po potoku, więc powinno działać poprawnie.

Jednak tak naprawdę nie możemy programować po wyrzuceniu tego błędu, więc jednym obejściem jest dodanie właściwości tablicy (tj. Stan) do implementacji potoku i zawsze zwracanie tej tablicy. Zobacz odpowiedź @ pixelbits na to rozwiązanie.

Możemy jednak być bardziej wydajni i, jak zobaczymy, nie będziemy potrzebować właściwości tablicy w implementacji potoku i nie będziemy potrzebować obejścia dla wykrywania podwójnej zmiany.

Wykrywanie zmian komponentów

Domyślnie przy każdym zdarzeniu przeglądarki wykrywanie zmian kątowych przechodzi przez każdy komponent, aby sprawdzić, czy się zmienił - sprawdzane są dane wejściowe i szablony (a może inne rzeczy?).

Jeśli wiemy, że składnik zależy tylko od jego właściwości wejściowych (i zdarzeń szablonu), a właściwości wejściowe są niezmienne, możemy zastosować znacznie wydajniejszą onPushstrategię wykrywania zmian. Dzięki tej strategii, zamiast sprawdzania każdego zdarzenia przeglądarki, komponent jest sprawdzany tylko wtedy, gdy zmieniają się dane wejściowe i gdy wyzwalają się zdarzenia szablonu. I najwyraźniej nie otrzymujemy tego Expression ... has changed after it was checkedbłędu przy tym ustawieniu. Dzieje się tak, ponieważ onPushskładnik nie jest ponownie sprawdzany, dopóki nie zostanie ponownie „zaznaczony” ( ChangeDetectorRef.markForCheck()). Dlatego powiązania szablonów i stanowe dane wyjściowe potoku są wykonywane / oceniane tylko raz. Potoki bezstanowe / czyste nadal nie są wykonywane, chyba że zmienią się ich dane wejściowe. Więc nadal potrzebujemy tu stanowej potoku.

Oto rozwiązanie zasugerowane przez @EricMartinez: potok stanowy z onPush wykrywaniem zmian. Zobacz odpowiedź @ caffinatedmonkey dla tego rozwiązania.

Zauważ, że w tym rozwiązaniu transform()metoda nie musi za każdym razem zwracać tej samej tablicy. Uważam to jednak za trochę dziwne: potok stanowy bez stanu. Myśląc o tym więcej ... potok stanowy prawdopodobnie powinien zawsze zwracać tę samą tablicę. W przeciwnym razie mógłby być używany tylko z onPushkomponentami w trybie deweloperskim.

Po tym wszystkim, myślę, że podoba mi się kombinacja odpowiedzi @ Erica i @ pixelbits: potok stanowy, który zwraca to samo odniesienie do tablicy, z onPushwykrywaniem zmian, jeśli komponent na to pozwala. Ponieważ potok stanowy zwraca to samo odwołanie do tablicy, potok może być nadal używany z komponentami, które nie są skonfigurowane z onPush.

Plunker

Prawdopodobnie stanie się to idiomem Angulara 2: jeśli tablica zasila potok, a tablica może się zmienić (elementy w tablicy, a nie odwołanie do tablicy), musimy użyć potoku stanowego.

Eric Martinez zauważył w komentarzach, dodając pure: falsedo Pipedekoratora i changeDetection: ChangeDetectionStrategy.OnPushdo Componentdekoratora będzie rozwiązać problem. Oto pracujący plunkr. Zmiana na ChangeDetectionStrategy.Alwaysrównież działa. Dlatego.

Zgodnie z przewodnikiem angular2 na rurach :

Potoki są domyślnie bezstanowe. Musimy zadeklarować, że potok jest stanowy, ustawiając purewłaściwość @Pipedekoratora na false. To ustawienie mówi systemowi wykrywania zmian Angulara, aby sprawdzał wyjście tej rury w każdym cyklu, czy jego wejście uległo zmianie, czy nie.

Jeśli chodzi o ChangeDetectionStrategy , domyślnie wszystkie powiązania są sprawdzane w każdym cyklu. Gdy pure: falserura jest dodany, to uważa, metody wykrywania zmiany zmienia się od CheckAlwayssię CheckOnceze względu na wydajność. W przypadku OnPushpowiązania dla składnika są sprawdzane tylko w przypadku zmiany właściwości wejściowej lub wyzwolenia zdarzenia. Aby uzyskać więcej informacji o wykrywaczach zmian, ważnej części angular2, zapoznaj się z poniższymi linkami:

• Zmień wykrywanie w Angular 2
• https://github.com/angular/angular/issues/4746
• Wykrywanie zmian odkrył na nowo Victor Savkin

Demo Plunkr

Nie musisz zmieniać ChangeDetectionStrategy. Wdrożenie stanowego potoku wystarczy, aby wszystko działało.

To jest potok stanowy (żadne inne zmiany nie zostały wprowadzone):

@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;
  }
}

Z dokumentacji kątowej

Czyste i nieczyste rury

Istnieją dwie kategorie rur: czyste i nieczyste. Rury są domyślnie czyste. Każda fajka, którą do tej pory widziałeś, była czysta. Czyścisz rurę, ustawiając jej czystą flagę na fałsz. Możesz uczynić FlyingHeroesPipe nieczystym w następujący sposób:

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

Zanim to zrobisz, zrozum różnicę między czystym a nieczystym, zaczynając od czystej fajki.

Czyste rury Angular wykonuje czystą potokę tylko wtedy, gdy wykryje czystą zmianę wartości wejściowej. Czysta zmiana to albo zmiana pierwotnej wartości wejściowej (ciąg, liczba, wartość logiczna, symbol), albo zmieniona referencja do obiektu (data, tablica, funkcja, obiekt).

Angular ignoruje zmiany w obiektach (złożonych). Nie wywoła czystego potoku, jeśli zmienisz miesiąc wejściowy, dodasz do tablicy wejściowej lub zaktualizujesz właściwość obiektu wejściowego.

Może się to wydawać restrykcyjne, ale jest też szybkie. Sprawdzenie odniesienia do obiektu jest szybkie - znacznie szybsze niż dokładne sprawdzenie różnic - dzięki czemu Angular może szybko określić, czy może pominąć zarówno wykonanie potoku, jak i aktualizację widoku.

Z tego powodu czysta potok jest preferowana, gdy możesz żyć ze strategią wykrywania zmian. Jeśli nie możesz, możesz użyć nieczystej rury.

Zamiast robić czyste: fałszywe. Możesz głęboko skopiować i zamienić wartość w komponencie na this.students = Object. assign ([], NEW_ARRAY); gdzie NEW_ARRAY to zmodyfikowana tablica.

Działa dla kątowej 6 i powinien działać również z innymi wersjami kątowymi.

Obejście problemu: ręcznie zaimportuj potok do konstruktora i wywołaj metodę transformacji przy użyciu tego potoku

constructor(
private searchFilter : TableFilterPipe) { }

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

Właściwie nie potrzebujesz nawet fajki

Dodaj do potoku dodatkowy parametr i zmień go zaraz po zmianie tablicy, a nawet przy czystym potoku lista zostanie odświeżona

niech pozycja przedmiotów | pipe: param

W tym przypadku użyłem mojego potoku w pliku ts do filtrowania danych. Jest to znacznie lepsze dla wydajności niż używanie czystych rur. Użyj w ts w ten sposób:

import { YourPipeComponentName } from 'YourPipeComponentPath';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

tworzenie zanieczyszczonych rur jest kosztowne w wydajności. więc nie twórz nieczystych potoków, raczej zmień odniesienie do zmiennej danych, tworząc kopię danych przy zmianie danych i ponownie przypisuj odniesienie do kopii w oryginalnej zmiennej danych.

            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();
            }