NgFor не оновлює дані за допомогою Pipe in Angular2

У цьому сценарії я відображаю список студентів (масив) для перегляду за допомогою ngFor:

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

Чудово, що вона оновлюється щоразу, коли я додаю до списку інших студентів.

Однак, коли я даю йому , pipeщоб filterпо імені студента,

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

Він не оновлює список, поки я не напишу щось у полі імені студента, що фільтрує.

Ось посилання на 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;
    }
}

Щоб повністю зрозуміти проблему та можливі рішення, нам потрібно обговорити виявлення кутових змін - для труб та компонентів.

Виявлення зміни труби

Труби без громадянства

За замовчуванням труби без стану / чисті. Труби без стану / чисті труби просто перетворюють вхідні дані у вихідні дані. Вони нічого не пам’ятають, тому не мають жодних властивостей - лише transform()метод. Таким чином, кутовий може оптимізувати обробку труб без стану / чистого стану: якщо їх вхід не змінюється, труби не потрібно виконувати під час циклу виявлення змін. Для таких труб, як {{power | exponentialStrength: factor}}, powerі factorє входи.

Для цього питання, "#student of students | sortByName:queryElem.value", studentsі queryElem.valueє входами, а труба sortByNameмає стан / чиста. students- це масив (посилання).

• Коли додається студент, посилання на масив не змінюється - studentsне змінюється - значить, труба без стану / чиста не виконується.
• Коли щось набирається на вході фільтра, queryElem.valueвоно змінюється, отже, виконується труба без стану / чистої.

Один із способів виправити проблему масиву - це змінювати посилання масиву щоразу, коли студент додається, тобто створювати новий масив щоразу, коли студент додається. Ми могли б зробити це за допомогою concat():

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

Хоча це працює, наш addNewStudent()метод не повинен бути реалізований певним чином лише тому, що ми використовуємо трубу. Ми хочемо використовувати, push()щоб додати до нашого масиву.

Державні труби

Державні труби мають стан - вони зазвичай мають властивості, а не лише transform()метод. Можливо, їх потрібно буде оцінити, навіть якщо їх внески не змінилися. Коли ми визначаємо, що труба є стаціонарною / нечистою - pure: false- тоді, коли система виявлення змін Angular перевіряє компонент на зміни, і цей компонент використовує стаціонарну трубу, він перевірятиме вихід труби, змінився чи ні його вхід.

Це звучить як те, що ми хочемо, навіть якщо це менш ефективно, оскільки ми хочемо, щоб труба виконувалася, навіть якщо studentsпосилання не змінилося. Якщо ми просто зробимо трубу стаціонарною, ми отримаємо помилку:

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

Відповідно до відповіді @ drewmoore , "ця помилка трапляється лише в режимі розробки (який увімкнено за замовчуванням у бета-0). Якщо ви телефонуєте enableProdMode()під час завантаження програми, помилка не буде викинута". У документах дляApplicationRef.tick() держави:

У режимі розробки галочка () також виконує другий цикл виявлення змін, щоб гарантувати, що подальших змін не буде виявлено. Якщо під час цього другого циклу з’являються додаткові зміни, прив’язки в додатку можуть мати побічні ефекти, які неможливо вирішити за один пропуск виявлення змін. У цьому випадку Angular видає помилку, оскільки кутова програма може мати лише один пропуск виявлення змін, під час якого слід виявити всі зміни.

У нашому сценарії я вважаю, що помилка є хибною / оманливою. У нас є потужна труба, і вихід може змінюватися кожного разу, коли він викликається - це може мати побічні ефекти, і це нормально. NgFor оцінюється після труби, тому він повинен працювати добре.

Однак ми не можемо реально розвиватися, коли ця помилка викидається, тому одним вирішенням є додавання властивості масиву (тобто стану) до реалізації труби та завжди повертати цей масив. Дивіться відповідь @ pixelbits для цього рішення.

Однак ми можемо бути ефективнішими, і, як ми побачимо, нам не знадобиться властивість масиву в реалізації труби, і нам не знадобиться рішення для виявлення подвійних змін.

Виявлення зміни компонентів

За замовчуванням у будь-якій події браузера виявлення кутових змін проходить через кожен компонент, щоб побачити, чи змінилось - перевіряються входи та шаблони (а може бути й інші речі?)

Якщо ми знаємо, що компонент залежить тільки від його вхідних властивостей (і подій шаблону), і що властивості введення незмінні, ми можемо використовувати набагато ефективнішу onPushстратегію виявлення змін. За допомогою цієї стратегії замість перевірки кожної події веб-переглядача компонент перевіряється лише тоді, коли змінюються входи та коли спрацьовують події шаблону. І, мабуть, ми не отримуємо цієї Expression ... has changed after it was checkedпомилки з цим налаштуванням. Це тому, що onPushкомпонент не перевіряється знову, поки він не буде "позначений" ( ChangeDetectorRef.markForCheck()) знову. Таким чином, прив'язки шаблонів і стаціонарні виходи труб виконуються / оцінюються лише один раз. Труби без стану / чисті труби досі не виконуються, якщо їх вхід не зміниться. Тож нам ще потрібна велика труба.

Це рішення @EricMartinez запропонував: стаціонарна труба з onPushвиявленням змін. Дивіться відповідь @ caffinedmonkey на це рішення.

Зауважте, що за допомогою цього рішення transform()методу не потрібно щоразу повертати один і той же масив. Я вважаю це трохи дивним: велика труба, яка не має штату. Якщо подумати про це ще трохи ... стан, який, напевно, повинен завжди повертати той же масив. В іншому випадку його можна використовувати лише з onPushкомпонентами в режимі розробки.

Отже, після всього цього, я думаю, що мені подобається поєднання відповідей @ Еріка та @ піксельбіта: стаціонарна труба, яка повертає ту саму посилання масиву, з onPushвиявленням змін, якщо компонент це дозволяє. Оскільки стаціонарна труба повертає ту саму посилання на масив, труба все ще може використовуватися з компонентами, які не налаштовані onPush.

Plunker

Це, мабуть, стане ідіомою Angular 2: якщо масив подає трубу, і масив може змінитися (елементи масиву, тобто не посилання на масив), нам потрібно використовувати стаціонарну трубу.

Як зазначив Ерік Мартінес у коментарях, додавання pure: falseдо вашого Pipeдекоратора та changeDetection: ChangeDetectionStrategy.OnPushдо вашого Componentдекоратора вирішить вашу проблему. Ось робочий планк. Перехід на ChangeDetectionStrategy.Always, також працює. Ось чому.

Відповідно до посібника angular2 на трубах :

Труби за замовчуванням не мають стану. Ми повинні оголосити трубу справжньою, встановивши pureвластивість @Pipeдекоратора false. Цей параметр повідомляє системі виявлення змін Angular перевіряти вихід цієї труби кожен цикл, змінився чи ні його вхід.

Що стосується ChangeDetectionStrategy, за замовчуванням, всі прив'язки перевіряються на кожному циклі. Коли pure: falseдодається труба, я вважаю, що метод виявлення змін змінюється на CheckAlwaysна CheckOnceз причин продуктивності. З OnPush, прив'язки для Компонента перевіряються лише тоді, коли змінюється властивість введення або коли спрацьовує подія. Для отримання додаткової інформації про детектори змін, важливу частину angular2, перегляньте наступні посилання:

• Виявлення змін у кутовій 2
• https://github.com/angular/angular/isissue/4746
• Виявлення змін переосмислив Віктор Савкін

Демо Плункр

Вам не потрібно змінювати ChangeDetectionStrategy. Впровадити потужну трубу достатньо, щоб все запрацювало.

Це надзвичайна ситуація (інших змін не було внесено):

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

З кутової документації

Чисті і нечисті труби

Існує дві категорії труб: чисті та нечисті. Труби за замовчуванням чисті. Кожна труба, яку ви бачили досі, була чистою. Ви робите нечистоту, встановлюючи її чистий прапор значення false. Ви можете зробити FlyingHeroesPipe таким чистим:

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

Перш ніж це зробити, зрозумійте різницю між чистим і нечистим, починаючи з чистої труби.

Чисті труби Angular виконує чисту трубу лише тоді, коли виявляє чисту зміну вхідного значення. Чиста зміна - це або зміна примітивного вхідного значення (String, Number, Boolean, Symbol), або змінене посилання на об'єкт (Date, Array, Function, Object).

Кутова ігнорує зміни всередині (складених) об'єктів. Чиста труба не зателефонує, якщо змінити місяць введення, додати до вхідного масиву або оновити властивість об'єкта введення.

Це може здатися обмежуючим, але це також швидко. Перевірка посилання на об'єкт швидка - набагато швидша, ніж глибока перевірка відмінностей - тому Angular може швидко визначити, чи може вона пропустити як виконання труби, так і оновлення перегляду.

З цієї причини чиста труба є кращою, коли ви можете жити зі стратегією виявлення змін. Коли ви не можете, ви можете використовувати нечисту трубу.

Замість того, щоб робити чисте: false. Ви можете глибоко скопіювати та замінити значення в компоненті на this.students = Object.assign ([], NEW_ARRAY); де NEW_ARRAY - це модифікований масив.

Він працює для кутових 6 і повинен працювати і для інших кутових версій.

Вирішення: імпорт труби вручну в конструктор та метод перетворення виклику за допомогою цієї труби

constructor(
private searchFilter : TableFilterPipe) { }

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

Насправді вам навіть труба не потрібна

Додайте в трубу додатковий параметр і змініть його відразу після зміни масиву, і навіть із чистою трубкою список буде оновлений

нехай пункт предметів | труба: парам

У цьому випадку використання я використовував файл Pipe in ts для фільтрації даних. Це набагато краще, ніж використання чистих труб. Використовуйте в таких формах:

import { YourPipeComponentName } from 'YourPipeComponentPath';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

створювати нечисті труби затратні у виконанні. тому не створюйте нечисті канали, скоріше змініть посилання на змінну даних, створивши копію даних при зміні даних та повторно призначте посилання копії в оригінальній змінній даних.

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