根据复选框列表中的条件过滤ngx-datatable

问题描述

我需要根据复选框的条件过滤ngx-datatable。目前，我知道了，但没有得到所需的结果。

以下是我的列表的屏幕截图。

默认值：

当按下其中一个复选框时，它会正确过滤我

但是，当我按下添加的另一个选项时，它只会显示最后一个选择的结果

HTML：

                    <div *ngFor="let ubica of ubicaciones">
                        <input type="checkBox" name="ofer_ubicacion" [value]="ubica.id_ubica_prov" (change)="updatefilterUbicacion($event)"> {{ubica.ubiprov_nombre}}
                    </div>

                    <ngx-datatable #mydatatable class="bootstrap expandable" [loadingIndicator]="isLoading" headerHeight="50" [limit]="25" [columnMode]="'force'" footerHeight="50" rowHeight="auto" [rows]="rows" [messages]="my_messages">
                        <ngx-datatable-column name="id_oferta" [maxWidth]="130">
                            <ng-template ngx-datatable-header-template>
                                <span>ID </span>
                            </ng-template>
                            <ng-template class="mat-column-id" ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                                <div class="text-center">{{ row.id_oferta }}</div>
                            </ng-template>
                        </ngx-datatable-column>
                        <ngx-datatable-column name="ofer_nombre" [maxWidth]="1860">
                            <ng-template ngx-datatable-header-template><span>Ordenar por fecha</span></ng-template>
                            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{ row.ofer_nombre }}
                                    </div>
                                </div>
                            </ng-template>
                        </ngx-datatable-column>
                    </ngx-datatable>

组件：

export class HomeComponent implements OnInit {
my_messages = {
  emptyMessage: "",totalMessage: "",encapsulation: ViewEncapsulation.None,};
rows = [];
temp = [];
@ViewChild(DatatableComponent,{ static: false }) table: DatatableComponent;
ColumnMode = ColumnMode;
isLoading: boolean;
checck: boolean = false;
ubicaciones: any;
constructor(private ofertasService: ofertasService) {
  this.getListado();
}

ngOnInit(): void {
  this.getListadoUbicacionesProv();
} 
getListado() {
  this.ofertasService.getListaOfertas((data) => { //from service
    this.temp = [...data];
    this.rows = data;
  });
} 
getListadoUbicacionesProv()
{
  this.ofertasService.getUbicacionesProv()
  .subscribe((respuesta:any) =>{
    this.ubicaciones = respuesta;
  });
}
updatefilterUbicacion(event) {
    const val = event.target.value.toLowerCase();
    const temp = this.temp.filter(function (d) {
      return d.ofer_ubicacion.toLowerCase().indexOf(val) !== -1 || !val;
    });
    this.rows = temp;
    this.table.offset = 0;
}

}

我不知道如何修改updatefilterLocation函数，以便它一次收集所有过滤器。有帮助吗？

解决方法

您可以使用垫选择列表。在此处查看示例：https://material.angular.io/components/list/examples

例如

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>

MatSelectionList的输出包含所有复选框：

@Output() selectionChange: EventEmitter<MatSelectionListChange>

请参阅：API https://material.angular.io/components/list/api