Assigning value to filter not returning filtered data on page load

Published

I am trying to filter through a datasource table which has a list of vehicles. I am receiving query parameters which is being assigned to a variable. The aim is to return the correct data using the filter field on the front end. The value is being assigned to the mat-form-field but it is not filtering on initialisation immediately, and I need it to immediately filter.
The field responsible for ensuring that the data is filtered when the page is loaded is ‘filteredValue’.

Vehicle-list.component.html

<mat-form-field appearance="outline">
  <mat-label>MM Code</mat-label>
  <input matInput type="text" [(ngModel)]="enteredValue" (input)="ngOnInit()" value={{tiaValue}}>
</mat-form-field>

<mat-form-field appearance="outline" hidden="true">
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="doFilter($event.target.value)" placeholder="Ex. BMW" value={{filteredValue}}>
</mat-form-field>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- mm code Column -->
  <ng-container matColumnDef="mmCode">
    <th mat-header-cell *matHeaderCellDef> MM Code </th>
    <td mat-cell *matCellDef="let vehicles"> {{vehicles.mmCode}} </td>
  </ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)" 
  [ngClass]="{hovered: row.hovered, highlighted: selection.isSelected(row)}"
  (mouseover)="row.hovered = true" (mouseout)="row.hovered = false" (click)="onRowClicked(row)">
  </tr> 
</table>

Vehicle-list.component.ts

private vehicleSub: Subscription;
  data;
  infoData;
  year: string;
  mmCode: string;
  tiaValue: string;
  enteredValue: string;
  filteredValue: string;
  correlationID: any;
  urlMM: any;
  urlMake: any;
  urlModel: any;
  urlYear: any;
  params: any;
  currentPage = 1;
  pageSizeOptions = [20, 100, 200];
  errorMMCode: any;

constructor(private http: HttpClient, public vehicleService: VehicleService, private router: Router, private route: ActivatedRoute) { 
    var param = {};
    this.route.queryParamMap.subscribe(params => {
      console.log(params);
      let metadata = params.get('source_metadata');
      var query = metadata.substring(0);
      var vars = query.split(' ');
      for( var i = 0; i < vars.length; i++){
        var pair = vars[i].split('=');
        param[pair[0]] = pair[1];

      }
      this.urlMM = param['mmcode'];
      this.urlMake = param['make'];
      this.urlModel = param['model'];
      this.urlYear = param['regyear']; 
  });
  }

  ngOnInit() {
    this.correlationID = this.route.snapshot.queryParamMap.get("source_id");
    console.log(this.correlationID);
    
    this.route.queryParamMap.subscribe(queryParams => {
      this.correlationID = queryParams.get("source_id");
    });
    if(this.urlMM != null){
      this.tiaValue = this.urlMM;
      this.params = new HttpParams()
    .set('mmCode', this.tiaValue);
    console.log((this.urlMM)); // Print the parameter to the console.
    }
    else{
      this.params = new HttpParams()
    .set('mmCode', this.enteredValue);
    console.log(this.enteredValue);
    }
    //this.filteredValue = this.urlYear;
    
    this.vehicleService.getVehicles(this.vehiclesPerPage, this.currentPage);
    this.vehicleSub = this.vehicleService.getVehiclesUpdate()
      .subscribe((vehicleData: {vehicles: Vehicle[], vehicleCount: number}) => {
        this.vehicles = vehicleData.vehicles;
        this.dataSource.data = this.vehicles as Vehicle[];
        
        this.totalVehicles = vehicleData.vehicleCount;
      });

      this.dataSource.filterPredicate = function(data, filter: string): boolean {
        const matchFilter = [];
        const filterArray = filter.split(' ');
        const columns = [data.mmCode.toString(), data.make.toLowerCase(), data.model.toLowerCase(), data.regYear.toString()];
        
        
        filterArray.forEach(filter => {
          const customFilter = [];
          columns.forEach(column => customFilter.push(column.includes(filter)));
          matchFilter.push(customFilter.some(Boolean)); // OR
        });
        
      return matchFilter.every(Boolean);
      };
      this.filteredValue = this.urlYear + ' ' + this.urlMM + ' ' + this.urlMake + ' ' + this.urlModel;
  }

public doFilter = (value: string) => {
    this.dataSource.filter = value.trim().toLowerCase();
  }

Source: Angular Questions

Published
Categorized as angular, mongodb, node.js Tagged , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq