复选框过滤仅适用于刷新 Angular2
Checkbox filtering only works on refresh Angular2
因此,为了便于使用,我想添加复选框作为过滤器。但是,它仅在我刷新页面时加载。
这些是我的文件:
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。为了清楚起见,我在这个问题中重命名了我的变量。控制台中的输出仅在我刷新页面时发生,而不是在我(取消)选中复选框时发生。感谢任何解决此问题的帮助。
Angulars 更改检测不检查对象的内容,仅对象引用自身,因此 Angular 无法识别 [=13= 中更新的 state
] 并且只要依赖值没有改变,Angular 就不会再次调用管道。
要变通,您可以使管道变得不纯净:
@Pipe({
name: 'CheckboxFilter',
pure: false
})
这种方式 Angular 每次更改检测 运行 时都会调用管道,这很常见,因此这可能会变得昂贵。
或者,您可以 Angular 通过创建数组的副本来识别更改
<input type="checkbox" [(ngModel)]="cb.state"
(ngModelChange)="forceUpdateCheckboxes()"> {{cb.label}}
forceUpdateCheckboxes() {
this.checkboxes = this.checkboxes.slice();
}
因此,为了便于使用,我想添加复选框作为过滤器。但是,它仅在我刷新页面时加载。
这些是我的文件:
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。为了清楚起见,我在这个问题中重命名了我的变量。控制台中的输出仅在我刷新页面时发生,而不是在我(取消)选中复选框时发生。感谢任何解决此问题的帮助。
Angulars 更改检测不检查对象的内容,仅对象引用自身,因此 Angular 无法识别 [=13= 中更新的 state
] 并且只要依赖值没有改变,Angular 就不会再次调用管道。
要变通,您可以使管道变得不纯净:
@Pipe({
name: 'CheckboxFilter',
pure: false
})
这种方式 Angular 每次更改检测 运行 时都会调用管道,这很常见,因此这可能会变得昂贵。
或者,您可以 Angular 通过创建数组的副本来识别更改
<input type="checkbox" [(ngModel)]="cb.state"
(ngModelChange)="forceUpdateCheckboxes()"> {{cb.label}}
forceUpdateCheckboxes() { this.checkboxes = this.checkboxes.slice(); }