我想用Angular 2过滤多个复选框，并实现像THIS这样的东西 .
问题是，当我检查2个不同的复选框时，应用程序无法正常工作 .
App.Component.html
<div *ngFor="let s of cpuName">
<input type="checkbox" [(ngModel)]="s.checked" (click)="updateFilter(s)" >{{s.name}}
</div>
<div *ngFor="let n of cpuCode">
<input type="checkbox" [(ngModel)]="n.checked" (click)="updateFilter(n)" >{{n.name}}
</div>
<ul>
<div *ngFor="let a of allCpu | filterPipe: filterArr">
ID: {{a.id}}, Name: {{a.name}}, Code: {{a.code}}
</div>
</ul>
App.Component.ts
export class AppComponent {
filterArr = [];
cpuName = [{checked:false,name:'Intel'},{checked:false,name:'AMD'}]
cpuCode =[{checked:false,name:'i5'},{checked:false,name:'i7'},{checked:false,name:'ryzen7'}]
name:string;
allCpu = [
{id:1, name:'Intel', code:'i5'},
{id:2, name:'Intel', code:'i5'},
{id:3, name:'AMD', code:'ryzen7'},
{id:4, name:'Intel', code:'i7'},
{id:5, name:'AMD', code:'ryzen7'},
{id:6, name:'Intel', code:'i7'}
]
updateFilter(option) {
if(!option.checked) {
this.filterArr.push(option.name);
console.log(this.filterArr);
}
else {
let index = this.filterArr.indexOf(option.name);
this.filterArr.splice(index, 1);
}
}
}
Pipe.ts
@Pipe({
name: 'filterPipe',
pure: false
})
export class FilterPipe implements PipeTransform {
transform(value: any, args?: any[]): any {
return value.filter(item => {
return args.length ? args.indexOf(item.name) != -1 : value;
})
}
}
1 回答
你几乎得到它的工作 .
i5，i7是allCpu中的代码，当迭代项检查名称或代码时，您需要修改管道
item有2个属性：名称和代码 .您的Intel和AMD过滤器有效，因为您检查args是否包含项目名称 .