问题描述
我是Angular的新手,我有一些要根据某些复选框使用管道过滤的组件列表,我不知道该如何实现。
export interface Parking {
multiple: boolean;
public: boolean;
name: string;
}
管道
import { Pipe,PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: unkNown,...args: unkNown[]): unkNown {
return null;
}
}
搜索组件
<form>
<div class="form-group mt-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkBox">
<label class="form-check-label" for="inlineCheckBox1" >Public</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkBox">
<label class="form-check-label" for="inlineCheckBox2" >Private</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkBox">
<label class="form-check-label" for="inlineCheckBox1" >Single</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkBox">
<label class="form-check-label" for="inlineCheckBox1" >Multiple</label>
</div>
</div>
</form>
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-filter',templateUrl: './filter.component.html',styleUrls: ['./filter.component.css']
})
export class FilterComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
以及用于显示组件的模板(map.component.html)
<div *ngFor="let parking of (parkings | filter)">
{{parking.name}}
</div>
我不知道如何在选中时继续根据复选框进行过滤
谢谢!
解决方法
让我们创建一个包含所有过滤器选项的对象,并将其初始化为 false 。
export class FilterComponent implements OnInit {
public filters = {
public: false,private: false,single: false,multiple: false,}
constructor() { }
ngOnInit(): void {
}
}
现在将它们像这样绑定在您的模板中
<form>
<div class="form-group mt-2">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" [(ngModel)]="filter.public">
<label class="form-check-label" for="inlineCheckbox1" >Public</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" [(ngModel)]="filter.private">
<label class="form-check-label" for="inlineCheckbox2" >Private</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" [(ngModel)]="filter.single">
<label class="form-check-label" for="inlineCheckbox1" >Single</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" [(ngModel)]="filter.multiple">
<label class="form-check-label" for="inlineCheckbox1" >Multiple</label>
</div>
</div>
</form>
因此,无论何时选中任何一项,其值都将为 true。
现在,将此 filters 对象传递到您的管道:parkings | filter : filters
<div *ngFor="let parking of (parkings | filter : filters)">
{{parking.name}}
</div>
并将其放入过滤器
transform(values: Parking[],filters:any): Parking[]{
// In case this is not getting any filters object,just return the same array
if(!filters)
return values;
/*** If actually got filters,just use the filter() method that arrays have ***/
// If you checked the "public" checkbox this if() statement will be solved to true
// so executates this filtering
if(filters.public){
// This is gonna filter array and return only current items where public is true
values = values.filter(item => item.public); // item => item.public == true
}
if(filters.multiple){
// This is gonna filter the filtered array again,so if you already
// excluded the private ones (so if parking.public is false),// now based on that results you will keep
values = values.filter(item => item.multiple);
}
return values;
}
这样,您可以继续过滤。如果您想添加不同的条件,我将手动执行每个过滤器,因此,让我们想象一下,您有10个过滤器的列表,其中条件将始终相同:values = values.filter(item => item.something == true);
您可以通过循环来简化此操作具有 Object.keys()的 filters对象会从该对象返回一个键数组。就是这样:
transform(values: Parking[],filters:any): Parking[]{
if(!filters)
return values;
Object.keys(filters).forEach(key => {
if(filters[key]){
values = values.filter(item => item[key]);
}
})
return values;
}
注意:如果您的停车属性与filters
相同,则适用最后一种方法。