Question

我试图了解MatTableDataSource的filterPredicate，当我以为自己很接近时，我就缺少了一些逻辑。

我想过滤数据源，如果数组的值为空或“”，则不应为定义为“”的每个值过滤。换句话说，用它知道的而不是不知道的过滤。

如果数组的长度等于0，我尝试将这些值分配为null。但是，即使这样也不起作用。

打字稿

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[]
    }

它应该做什么：根据我的查询进行过滤

作用：仅在所有值都填满后才进行过滤。

Answer 1

您只需要检查filter属性是否存在并且长度大于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;
     }
   }
});

如何使用filterPredicate忽略对空/未定义字段的过滤

1 个答案: