Node.js 将值赋给筛选器在页面加载时不返回筛选数据

我试图通过一个包含车辆列表的数据源表进行筛选。我正在接收分配给变量的查询参数。目的是使用前端的过滤器字段返回正确的数据。该值被分配给mat form字段，但它在初始化时不会立即过滤，我需要它立即过滤。 负责确保在加载页面时过滤数据的字段为“filteredValue”

车辆列表.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>

毫米码
滤器
毫米码
{{vehicles.mmCode}

车辆列表.部件.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();
  }

私家车ub：订阅；
数据；
信息数据；
年份：字符串；
mmCode：字符串；
值：字符串；
输入值：字符串；
filteredValue:字符串；
correlationID：任何；
urlMM：任何；
制造：任何；
模型：任何；
年份：任何；
参数：任何；
currentPage=1；
pageSizeOptions=[20100200]；
错误代码：任何；
构造函数（私有http:HttpClient，公共车辆服务：车辆服务，私有路由器：路由器，私有路由：ActivatedRoute）{
var param={}；
this.route.queryParamMap.subscribe（参数=>{
控制台日志（params）；
让metadata=params.get（'source_metadata'）；
var query=metadata.substring（0）；
var vars=query.split（“”）；
对于（变量i=0；i{
this.correlationID=queryParams.get（“source_id”）；
});
如果（this.urlMM！=null）{
this.tiaValue=this.urlMM；
this.params=新的HttpParams（）
.set（'mmCode'，此.set值）；
console.log（（this.urlMM））；//将参数打印到控制台。
}
否则{
this.params=新的HttpParams（）
.set（'mmCode'，此.enteredValue）；
console.log（此.enteredValue）；
}
//this.filteredValue=this.urlYear；
this.vehicleService.getVehicles（this.vehiclesPerPage，this.currentPage）；
this.vehicleSub=this.vehiclesservice.getVehiclesUpdate（）
.订阅（（车辆数据：{vehicles:Vehicle[]，vehicleCount:number}）=>{
此.vehicles=车辆数据.vehicles；
this.dataSource.data=this.vehicles as Vehicle[]；
this.totalVehicles=vehicleData.vehicleCount；
});
this.dataSource.filterPredicate=函数（数据，筛选器：字符串）：布尔值{
常量匹配过滤器=[]；
常量filterArray=filter.split（“”）；
const columns=[data.mmCode.toString（），data.make.toLowerCase（），data.model.toLowerCase（），data.regYear.toString（）]；
filterArray.forEach（过滤器=>{
常量customFilter=[]；
columns.forEach（column=>customFilter.push（column.includes（filter））；
matchFilter.push（customFilter.some（Boolean））；//或
});
返回matchFilter.every（布尔值）；
};
this.filteredValue=this.urlYear+''+this.urlMM+''+this.urlMake+''+this.urlModel；
}
公共doFilter=（值：字符串）=>{
this.dataSource.filter=value.trim（）.toLowerCase（）；
}