复选框过滤仅适用于刷新Angular2

时间:2016-05-04 07:50:52

标签: javascript angular angular2-pipe

因此,为了便于使用,我想添加复选框作为过滤器。但是,它只在我刷新页面时加载。

这些是我的文件:

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 。为了清楚起见,我在这个问题中重新命名了我的变量。控制台中的输出仅在我刷新页面时发生,而不是在我(取消)选中复选框时发生。感谢您解决此问题的任何帮助。

1 个答案:

答案 0 :(得分:4)

角度变化检测不会检查对象的内容,只有对象引用自身,因此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();   }

Plunker example