我正在使用Angular 4的ngx-filter-pipe,并且遇到了问题。我已经成功地使用一个值进行筛选,现在我尝试使用多个值来筛选数据:这是我的组件:
@Component({
selector: 'deudas-list',
templateUrl: '../views/deudas-list.html',
providers: [ DeudaService ]
})
export class DeudasListComponent{
public titulo: string;
public deudas: Deuda[];
public userFilter: any = { mes: '' };
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _productoService: DeudaService
) {
this.titulo = 'Listado de Pagos:';
}
ngOnInit() {
this._productoService.getDeudas().subscribe(
result =>{
console.log(result['Cuotas'].Cuota);
this.deudas = result['Cuotas'].Cuota;
},
error => {
console.log(<any>error);
}
);
}
}
这是我的观点<div class="form-group has-feedback">
<label for="term" class="sr-only">Search</label>
<input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
<div *ngIf="deudas" class="table-responsive col-lg-12 tablilla">
<table class="table table-bordered table-striped table-responsive">
<tbody>
<tr *ngFor="let deuda of deudas | filterBy: userFilter | paginate: {itemsPerPage:10,currentPage: p}">
<td>{{deuda.nombre_edificio}}</td>
<td>{{deuda.numero_dpto}}</td>
<td>{{deuda.Annio}}</td>
<td>{{deuda.mes}}</td>
<td>{{deuda.nombre_tipo_cuota}}</td>
<td>{{deuda.monto_cuota}}</td>
<td>{{deuda.nombre_estado_cuota}}</td>
<td>{{deuda.fecha_pago}}</td>
</tr>
</tbody>
</table>
<pagination-controls (pageChange)="p = $event" class="paginador"></pagination-controls>
</div>
我试了很多方法,但是无法使它生效。这是我正在遵循的文档 https://github.com/VadimDez/ngx-filter-pipe 我无法像显示的那样使用$ or 过滤器
这是我从ws获取的数据
正如你所看到的,我正在使用mes来进行筛选,但我想使用更多的筛选条件:
<input type="text" name="term" [(ngModel)]="userFilter.mes" class="form-control" id="term" placeholder="Buscar por mes...">
非常感谢您的帮助。