Фильтрация значений между конкретными числами с использованием файла Angular Material'sPredicate?

Question

У меня проблема с фильтрацией между двумя значениями, когда я хочу отфильтровать источник данных. Похоже, что он фильтрует, но он не фильтрует через него идеально.

Так как числа возвращаются в виде строк, я не могу сделать <= и a> =, чтобы добраться до выхода, который соответствуеткритерии. Я даже пытался преобразовать их в числовые значения, но это тоже не помогло. Я чувствую, что я близок, но мне где-то не хватает логики.

Я могу вернуть значения, которые соответствуют определенным критериям

Машинопись

ngOnInit() {
    this.maxMileage=1000000;
    this.highValue=5000000;
    this.search = this.form.group(
      {
        provinceSelector: ['',],
        colorSelector: ['',],
        makeSelector: ['',],
        modelSelector: ['',],
        yearSelector: ['',]
      }
    );

    this.checkedProvince = false;
    this.hpService.GetAdvertsInProvince().subscribe(val => {
      this.provinces = val;
    })
    this.hpService.GetAllColoursInAdverts().subscribe(val => {
      this.colors = val;
    });
    this.hpService.GetMakesInAdverts().subscribe(val => {
      this.makes = val;
    });
    var minYear = 1900;
    var thisYear = new Date().getFullYear();
    for (let y = thisYear; y >= minYear; y--) {
      this.years.push(y.toString());
    }

    this.registeredUserService.GetAllAdverts().subscribe(val => {

      this.dataSource = new MatTableDataSource<Card>(val);

      this.dataSource.filterPredicate = (myObject: IFilter, filterString: any) => {
        let filterObj: IFilter = JSON.parse(filterString);
        console.log(filterObj);
        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))||
          (filterObj.vehicleMileage && filterObj.vehicleMileage.length > 0 && !filterObj.vehicleMileage.includes(myObject.vehicleMileage))||
          (filterObj.sellingPrice && filterObj.sellingPrice.length > 0 && !filterObj.sellingPrice.includes(myObject.sellingPrice))) {
           return false;
         } else {
           return true;
         }

      }

      this.obs = this.dataSource.connect();

      let numOfAds = 0;
      for (let a of val) {
        this.imageToLoad[numOfAds] = { url: this.apiURL + '/api/Images/' + a.advertID + '_1' };
this.dataSource.paginator = this.paginator;
        numOfAds++;
      }
      console.log(this.imageToLoad);

    }, error => this.snack.open("Something went wrong. Please try again later")._dismissAfter(5000));

  }

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

addfilter() //when triggered, it implements 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;

    var priceArray = [];
    var mileageArray = [];
    this.hpService.GetAdvertisedPrices().subscribe(val=>
      {
        this.myFilter.sellingPrice=null;
        val.forEach(v => {

          if(parseInt(v.sellingPrice) >= this.value && parseInt(v.sellingPrice) <= this.highValue)
          {
            priceArray.push(v.sellingPrice);
          }
        });
        this.myFilter.sellingPrice=priceArray;
      })
      this.hpService.GetAdvertisedMileages().subscribe(val=>
        {
          this.myFilter.vehicleMileage=null;
          val.forEach(v=> {
            if(parseInt(v.vehicleMileage) >= this.minMileage && parseInt(v.vehicleMileage) <= this.maxMileage)
          {
            mileageArray.push(v.vehicleMileage);
          }
          });
          this.myFilter.vehicleMileage=mileageArray;
        })


      console.log(this.dataSource)
    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.myFilter.provinceName='';
      this.myFilter.vehicleMake='';
      this.myFilter.vehicleModel='';
      this.myFilter.vehicleYear='';
      this.myFilter.vehicleColor='';
      this.dataSource.filter = '';
    }
    if (this.myFilter.provinceName == 0) {
      delete this.myFilter.provinceName;
    }
    if (this.myFilter.vehicleMake.length == 0) {
      delete this.myFilter.vehicleMake;
    }
    if (this.myFilter.vehicleModel.length == 0) {
      delete this.myFilter.vehicleModel;
    }
    if (this.myFilter.vehicleYear.length == 0) {
      delete this.myFilter.vehicleYear;
    }
    if (this.myFilter.vehicleColor.length == 0) {
      delete this.myFilter.vehicleColor;
    }
    if(this.myFilter.sellingPrice.length==0)
    {
      delete this.myFilter.sellingPrice;
    }
    if(this.myFilter.vehicleMileage.length==0)
    {
      delete this.myFilter.vehicleMileage;
    }
    console.log(this.myFilter);
    this.dataSource.filter = JSON.stringify(this.myFilter);

  }

export interface Card {
  advertDate: any;
  advertDescription: any;
  advertID: any;
  cityName: any;
  provinceName: any;
  sellerID: any;
  sellingPrice: number;
  vehicleColor: any;
  vehicleMake: any;
  vehicleMileage: any;
  vehicleModel: any;
  vehicleYear: any;
}

export interface IFilter{
  provinceName:any,
  vehicleMake:any,
  vehicleModel:any,
  vehicleColor:any,
  vehicleYear:any,
  vehicleMileage:any,
  sellingPrice:any
}
export interface IRange{
  minPrice:any,
  maxPrice:any,
  minMileage:any,
  maxMileage:any
}

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