my filter does not work on the mat-table data table Angular Typescript-CodePudding

I try in vain to filter my table but it does not react correctly, I don't see where my mistake is.

html part :

              <mat-label>Rechercher</mat-label>
              <mat-icon style="color: #4D59EF;" matPrefix>search</mat-icon>
              <input matInput [formControl]="searchBar"  placeholder="Rechercher" #input>
            </mat-form-field>

ts part :

displayedColumns: string[] =['natureDuService', 'domaineApplication', 'statusService', 'descriptionFonctionnelle'];
dataSource : MatTableDataSource<IdsGeneralModel> = new MatTableDataSource();

 searchBar= new FormControl('');

filteredValues = {natureDuService:'', typeService:'', couvGeo:'', status:'', domain:'' };

    ngOnInit():void{

      this.searchBar.valueChanges.subscribe((searchBarFilterValue)        => {
        this.filteredValues['natureDuService'] = searchBarFilterValue;
        this.dataSource.filter = JSON.stringify(this.filteredValues);
        });

     this.dataSource.filterPredicate = this.customFilterPredicate();
}

      customFilterPredicate() {
        const myFilterPredicate = function(data:IdsGeneralModel, filter:string) :boolean {
          let searchString = JSON.parse(filter);
          let searchFound = data.natureDuService.toString().trim().toLowerCase().indexOf(searchString.natureDuService.toLowerCase()) !== -1 
          if (searchString.topFilter) {
            return searchFound
          } else {
            return searchFound
          }
        }
        return myFilterPredicate;
      }

Thanks for your help !

CodePudding user response：

No data has been assigned to the data source

You can assign it when declaring the dataSource variable, the rest of your logic should be working as expected.

dataSource: MatTableDataSource<IdsGeneralModel> = new MatTableDataSource(ELEMENT_DATA);