Флажок фильтрации работает только при обновлении Angular2

Question

Поэтому для простоты использования я хочу добавить флажки в качестве фильтров. Тем не менее, он загружается только когда я обновляю страницу.

Это мои файлы:

filename.component.ts

import { Component } from '@angular/core';
import { CheckboxFilterPipe } from './checkbox-filter.pipe';

@Component({
    templateUrl: 'app/filename.component.html',
    pipes: [CheckboxFilterPipe]
})

export class filenameComponent {
    checkboxes: any[] = [{
        id: 1,
        label: 'Filter 1',
        state: true
    }, {
        id: 2,
        label: 'Filter 2',
        state: true
    }];

    displayData: any[] = [
        // Objects I want to display
    ];
}

Флажок-filter.pipe.ts

import { Pipe, Pipetransform } from '@angular/core';

@Pipe({
    name: 'CheckboxFilter'
})

export class CheckboxFilterPipe implements PipeTransform {
    transform(values: any[], args: string[]): boolean {
        console.log(args);
        return values.filter(value=> {
            // My filtercode, return true for now
            return true;
        });
    }
}

filename.component.html

<div class="content-wrapper">
    <div class="row">
        <label *ngFor="let cb of checkboxes">
            <input type="checkbox" [(ngModel)]="cb.state"> {{cb.label}}
        </label>
    </div>
</div>
<table>
    <tr *ngFor="let value of displayData | CheckboxFilter:checkboxes">
        <td>{{ value.value1 }}</td>
        <td>{{ value.value2 }}</td>
        <td>{{ value.value2 }}</td>
    </tr>
</table>

Я использую Angular2.rc.0. Я переименовал мои переменные в этом вопросе для ясности. Вывод в консоль происходит только тогда, когда я обновляю страницу, а не когда я (не) проверяю флажки. Любая помощь для решения этой проблемы приветствуется.

Answer 1

Обнаружение изменения Angulars не проверяет содержимое объектов, только сам объект ссылается, поэтому Angular не распознает обновленные state в checkboxes и пока зависимые значения не изменились, Angular больше не вызывает канал.

Чтобы обойти это, вы можете сделать трубу нечистой:

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

Таким образом, Angular вызывает канал каждый раз, когда выполняется обнаружение изменений, что довольно часто, поэтому это может стать дорогостоящим.

В качестве альтернативы вы можете сделать Angular распознавать изменения, создав копию массива

<input type="checkbox" [(ngModel)]="cb.state"
    (ngModelChange)="forceUpdateCheckboxes()"> {{cb.label}}

forceUpdateCheckboxes() { this.checkboxes = this.checkboxes.slice(); }

Пример плунжера