Как игнорировать фильтрацию для полей, которые являются пустыми / неопределенными, используя filterPredicate - PullRequest
0 голосов
/ 23 октября 2019

Я пытаюсь понять filterPredicate MatTableDataSource, и когда я думал, что был близок, мне не хватает какой-то логики.

Я хочу отфильтровать источник данных, и если значение массива пустое или ""то он не должен фильтроваться для каждого значения, которое определено как "". Другими словами, фильтруйте то, что он знает, а не то, что он не знает.

Я пытался присвоить значения нулю, если длина массива равна 0. Но даже это не сработало.

Машинопись

this.registeredUserService.GetAllAdverts().subscribe(val => {
          this.dataSource = new MatTableDataSource<Card>(val);
          this.dataSource.paginator = this.paginator;
          this.dataSource.filterPredicate = (myObject: IFilter, filterString: any) => {
            let filterObj: IFilter = JSON.parse(filterString);
            if (!filterObj.provinceName.includes(myObject.provinceName) ||
              !filterObj.vehicleMake.includes(myObject.vehicleMake) ||
              !filterObj.vehicleModel.includes(myObject.vehicleModel) ||
              !filterObj.vehicleYear.includes(myObject.vehicleYear) ||
              !filterObj.vehicleColor.includes(myObject.vehicleColor))
            {
              return false;
            }
            else {
              return true;
            }
          }

    filter()//whenever triggered, it should do the filtering
    {
        this.myFilter.provinceName = this.search.value.provinceSelector;
        this.myFilter.vehicleMake = this.search.value.makeSelector;
        this.myFilter.vehicleModel = this.search.value.modelSelector;
        this.myFilter.vehicleColor = this.search.value.colorSelector;
        this.myFilter.vehicleYear = this.search.value.yearSelector;

        if (this.myFilter.provinceName.length == 0 &&
          this.myFilter.vehicleMake.length == 0 &&
          this.myFilter.vehicleModel.length == 0 &&
          this.myFilter.vehicleColor.length == 0 &&
          this.myFilter.vehicleYear.length == 0) {
          this.dataSource.filter = '';
        }

        else {
          this.dataSource.filter = JSON.stringify(this.myFilter);
        }
      }

    myFilter: IFilter = {
        provinceName: [],
        vehicleMake: [],
        vehicleModel: [],
        vehicleColor: [],
        vehicleYear: []
      }

    interface IFilter{
      provinceName:any[],
      vehicleMake:any[],
      vehicleModel:any[],
      vehicleColor:any[],
      vehicleYear:any[]
    }

Что он должен делать: Фильтровать по моему запросу

Что он делает: Фильтрация выполняется только после заполнения всех значений.

1 Ответ

1 голос
/ 24 октября 2019

Вам просто нужно проверить атрибут фильтра, если он существует, а длина больше 0, а затем искать его в вашем объекте.

this.registeredUserService.GetAllAdverts().subscribe(val => {
  this.dataSource = new MatTableDataSource<Card>(val);
  this.dataSource.paginator = this.paginator;
  this.dataSource.filterPredicate = (myObject: IFilter, filterString: any) => {
    let filterObj: IFilter = JSON.parse(filterString);
    if (
      (filterObj.provinceName && filterObj.provinceName.length > 0 && !filterObj.provinceName.includes(myObject.provinceName)) ||
      (filterObj.vehicleMake && filterObj.vehicleMake.length > 0 && !filterObj.vehicleMake.includes(myObject.vehicleMake)) ||
      (filterObj.vehicleModel && filterObj.vehicleModel.length > 0 && !filterObj.vehicleModel.includes(myObject.vehicleModel)) ||
      (filterObj.vehicleYear && filterObj.vehicleYear.length > 0 && !filterObj.vehicleYear.includes(myObject.vehicleYear)) ||
      (filterObj.vehicleColor && filterObj.vehicleColor.length > 0 && !filterObj.vehicleColor.includes(myObject.vehicleColor))
     ) {
       return false;
     } else {
       return true;
     }
   }
});
...