NgFor tidak memperbarui data dengan Pipe di Angular2

Dalam skenario ini, saya menampilkan daftar siswa (larik) ke tampilan dengan ngFor:

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

Sangat menyenangkan bahwa itu diperbarui setiap kali saya menambahkan siswa lain ke daftar.

Namun, ketika saya memberikan pipekepada filterdengan nama mahasiswa,

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

Itu tidak memperbarui daftar sampai saya mengetik sesuatu di bidang pemfilteran nama siswa.

Ini tautan ke 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>

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

Untuk memahami sepenuhnya masalah dan solusi yang mungkin, kita perlu membahas deteksi perubahan sudut - untuk pipa dan komponen.

Deteksi Perubahan Pipa

Pipa tanpa negara / murni

Secara default, pipa tidak memiliki kewarganegaraan / murni. Pipa tanpa status / murni hanya mengubah data masukan menjadi data keluaran. Mereka tidak mengingat apa pun, jadi mereka tidak memiliki properti apa pun - hanya sebuah transform()metode. Oleh karena itu Angular dapat mengoptimalkan penanganan pipa stateless / murni: jika inputnya tidak berubah, pipa tidak perlu dijalankan selama siklus deteksi perubahan. Untuk pipa seperti {{power | exponentialStrength: factor}}, powerdan factoradalah masukan.

Untuk pertanyaan ini "#student of students | sortByName:queryElem.value",, studentsdan queryElem.valueadalah masukan, dan pipa sortByNameadalah tanpa kewarganegaraan / murni. studentsadalah larik (referensi).

• Ketika seorang siswa ditambahkan, referensi array tidak berubah - studentstidak berubah - maka pipa stateless / pure tidak dijalankan.
• Ketika sesuatu diketik ke dalam input filter, queryElem.valueberubah, maka pipa stateless / pure dijalankan.

Salah satu cara untuk memperbaiki masalah larik adalah dengan mengubah referensi larik setiap kali seorang siswa ditambahkan - yaitu, membuat larik baru setiap kali seorang siswa ditambahkan. Kami dapat melakukan ini dengan concat():

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

Meskipun ini berhasil, addNewStudent()metode kami tidak harus diimplementasikan dengan cara tertentu hanya karena kami menggunakan pipa. Kami ingin menggunakan push()untuk menambah array kami.

Pipa Stateful

Pipa berstatus memiliki status - pipa tersebut biasanya memiliki properti, bukan hanya transform()metode. Mereka mungkin perlu dievaluasi bahkan jika masukan mereka tidak berubah. Ketika kita menentukan bahwa pipa adalah stateful / non-pure - pure: false- maka setiap kali sistem deteksi perubahan Angular memeriksa komponen untuk perubahan dan komponen itu menggunakan pipa stateful, itu akan memeriksa output pipa, apakah inputnya berubah atau tidak.

Ini terdengar seperti yang kami inginkan, meskipun kurang efisien, karena kami ingin pipa dieksekusi meskipun studentsreferensinya tidak berubah. Jika kita membuat pipa menjadi stateful, kita mendapatkan error:

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

Menurut jawaban @drewmoore , "kesalahan ini hanya terjadi dalam mode pengembang (yang diaktifkan secara default pada beta-0). Jika Anda memanggil enableProdMode()saat melakukan bootstrap aplikasi, kesalahan tidak akan muncul." The docs untukApplicationRef.tick() negara:

Dalam mode pengembangan, tick () juga menjalankan siklus deteksi perubahan kedua untuk memastikan bahwa tidak ada perubahan lebih lanjut yang terdeteksi. Jika perubahan tambahan terjadi selama siklus kedua ini, binding di aplikasi memiliki efek samping yang tidak dapat diselesaikan dalam satu kali proses deteksi perubahan. Dalam hal ini, Angular melontarkan kesalahan, karena aplikasi Angular hanya dapat memiliki satu deteksi perubahan yang selama itu semua deteksi perubahan harus diselesaikan.

Dalam skenario kami, saya yakin kesalahan itu palsu / menyesatkan. Kami memiliki pipa stateful, dan hasilnya dapat berubah setiap kali dipanggil - ini dapat memiliki efek samping dan tidak apa-apa. NgFor dievaluasi setelah pipa, jadi seharusnya berfungsi dengan baik.

Namun, kami tidak dapat benar-benar mengembangkan dengan kesalahan ini dilemparkan, jadi salah satu solusinya adalah menambahkan properti array (yaitu, status) ke implementasi pipa dan selalu mengembalikan array itu. Lihat jawaban @ pixelbits untuk solusi ini.

Namun, kita bisa menjadi lebih efisien, dan seperti yang akan kita lihat, kita tidak memerlukan properti array dalam implementasi pipa, dan kita tidak memerlukan solusi untuk deteksi perubahan ganda.

Deteksi Perubahan Komponen

Secara default, pada setiap acara browser, deteksi perubahan Angular melewati setiap komponen untuk melihat apakah itu berubah - input dan template (dan mungkin hal-hal lain?) Dicentang.

Jika kita mengetahui bahwa sebuah komponen hanya bergantung pada properti masukannya (dan kejadian template), dan bahwa properti masukan tidak dapat diubah, kita dapat menggunakan onPushstrategi deteksi perubahan yang jauh lebih efisien . Dengan strategi ini, alih-alih memeriksa setiap peristiwa browser, sebuah komponen hanya diperiksa saat input berubah dan saat peristiwa template dipicu. Dan, tampaknya, kami tidak mendapatkan Expression ... has changed after it was checkedkesalahan itu dengan pengaturan ini. Ini karena sebuah onPushkomponen tidak diperiksa lagi sampai "ditandai" ( ChangeDetectorRef.markForCheck()) lagi. Jadi binding Template dan keluaran pipa stateful dijalankan / dievaluasi hanya sekali. Pipa stateless / murni masih tidak dieksekusi kecuali inputnya berubah. Jadi kami masih membutuhkan pipa stateful di sini.

Ini adalah solusi yang disarankan @EricMartinez: pipa stateful dengan onPushdeteksi perubahan. Lihat jawaban @ caffinatedmonkey untuk solusi ini.

Perhatikan bahwa dengan solusi ini, transform()metode tidak perlu mengembalikan larik yang sama setiap kali. Saya merasa agak aneh: pipa stateful tanpa state. Berpikir tentang itu lagi ... pipa stateful mungkin harus selalu mengembalikan array yang sama. Jika tidak, ini hanya dapat digunakan dengan onPushkomponen dalam mode pengembang.

Jadi setelah semua itu, saya rasa saya suka kombinasi jawaban @ Eric dan @ pixelbits: pipa stateful yang mengembalikan referensi array yang sama, dengan onPushdeteksi perubahan jika komponen memungkinkan. Karena pipa stateful mengembalikan referensi larik yang sama, pipa tersebut masih dapat digunakan dengan komponen yang tidak dikonfigurasi dengan onPush.

Plunker

Ini mungkin akan menjadi idiom Angular 2: jika array memberi makan pipa, dan array mungkin berubah (item dalam array itu, bukan referensi array), kita perlu menggunakan pipa stateful.

Seperti yang ditunjukkan Eric Martinez di komentar, menambahkan pure: falseke Pipedekorator Anda dan dekorator changeDetection: ChangeDetectionStrategy.OnPushAnda Componentakan memperbaiki masalah Anda. Berikut adalah plunkr yang berfungsi. Mengganti ke ChangeDetectionStrategy.Always, juga berfungsi. Inilah alasannya.

Menurut panduan angular2 pada pipa :

Pipa tidak memiliki kewarganegaraan secara default. Kita harus mendeklarasikan pipa menjadi stateful dengan menyetel pureproperti @Pipedekorator ke false. Pengaturan ini memberi tahu sistem deteksi perubahan Angular untuk memeriksa keluaran pipa ini setiap siklus, apakah masukannya berubah atau tidak.

Adapun ChangeDetectionStrategy, secara default, semua binding diperiksa setiap siklus. Ketika pure: falsepipa ditambahkan, saya yakin metode deteksi perubahan berubah dari CheckAlwaysmenjadi CheckOncekarena alasan kinerja. Dengan OnPush, binding untuk Komponen hanya diperiksa saat properti input berubah atau saat peristiwa dipicu. Untuk informasi lebih lanjut tentang detektor perubahan, bagian penting dari angular2, lihat tautan berikut:

• Ubah Deteksi di Sudut 2
• https://github.com/angular/angular/issues/4746
• Ubah Deteksi Menemukan Kembali Victor Savkin

Demo Plunkr

Anda tidak perlu mengubah ChangeDetectionStrategy. Menerapkan Pipe stateful sudah cukup untuk membuat semuanya berfungsi.

Ini adalah pipa stateful (tidak ada perubahan lain yang dilakukan):

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

Dari dokumentasi sudut

Pipa murni dan tidak murni

Ada dua kategori pipa: murni dan tidak murni. Pipa murni secara default. Setiap pipa yang Anda lihat sejauh ini murni. Anda membuat pipa tidak murni dengan menyetel benderanya yang murni ke false. Anda bisa membuat FlyingHeroesPipe tidak murni seperti ini:

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

Sebelum melakukan itu, pahami perbedaan antara murni dan tidak murni, dimulai dengan pipa murni.

Pipa murni Angular mengeksekusi pipa murni hanya jika mendeteksi perubahan murni ke nilai input. Perubahan murni adalah perubahan ke nilai input primitif (String, Angka, Boolean, Simbol) atau referensi objek yang diubah (Tanggal, Array, Fungsi, Objek).

Angular mengabaikan perubahan dalam objek (komposit). Ini tidak akan memanggil pipa murni jika Anda mengubah bulan masukan, menambah larik masukan, atau memperbarui properti objek masukan.

Ini mungkin tampak membatasi tetapi juga cepat. Pemeriksaan referensi objek cepat — jauh lebih cepat daripada pemeriksaan mendalam untuk perbedaan — jadi Angular dapat dengan cepat menentukan apakah ia dapat melewati eksekusi pipa dan pembaruan tampilan.

Untuk alasan ini, pipa murni lebih disukai bila Anda dapat menyesuaikan diri dengan strategi deteksi perubahan. Jika tidak bisa, Anda bisa menggunakan pipa yang tidak murni.

Daripada melakukan pure: false. Anda dapat menyalin dalam dan mengganti nilai dalam komponen dengan this.students = Object.assign ([], NEW_ARRAY); di mana NEW_ARRAY adalah larik yang dimodifikasi.

Ini berfungsi untuk sudut 6 dan harus bekerja untuk versi sudut lainnya juga.

Solusi: Impor Pipa secara manual dalam konstruktor dan panggil metode transformasi menggunakan pipa ini

constructor(
private searchFilter : TableFilterPipe) { }

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

Sebenarnya Anda bahkan tidak membutuhkan pipa

Tambahkan parameter ekstra ke pipa, dan ubah tepat setelah perubahan array, dan bahkan dengan pipa murni, daftar akan diperbarui

biarkan item item | pipa: param

Dalam kasus penggunaan ini saya menggunakan file Pipe in ts untuk pemfilteran data. Jauh lebih baik untuk kinerja, daripada menggunakan pipa murni. Gunakan di ts seperti ini:

import { YourPipeComponentName } from 'YourPipeComponentPath';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

untuk membuat pipa yang tidak murni mahal harganya. jadi jangan membuat pipa yang tidak murni, tetapi ubah referensi variabel data dengan membuat salinan data saat mengubah data dan menetapkan ulang referensi salinan dalam variabel data asli.

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