Установить пропущенный фильтр в таблицу угловых материалов

Question

У меня есть таблица угловых материалов и поиск работает нормально ...

Проблема в том, что у меня есть route A, и на этом маршруте я отправляю значение в поле поиска в таблице в route B, и им нужноавтоматически устанавливать отфильтрованные данные в таблице.

Я правильно получаю это значение в поле поиска в таблице, но оно не применяется к таблице ... если я добавлю любую букву или цифру вручную, фильтр будет работать правильно

Вот component A

goToRouteB(id): void {
  this.router.navigate(["/routeB"], { state: { data: id } }); //id: is some number
}

А вот component B

ngOnInit() {
  if (history.state.data) {   //history.state.data is passed id
    this.searchKey = history.state.data;
    this.dataSource.filterPredicate = function(data, filter: string): boolean {
      return data.userId.toString() === filter;
    };
  }
}

Answer 1

Попробуйте переместить вашу логику в ngAfterViewInit:

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit()() {
    if (history.state.data) {   //history.state.data is passed id
        this.searchKey = history.state.data;
        this.dataSource.filterPredicate = function(data, filter: string): boolean 
        {
            return data.userId.toString() === filter;
        };
     }
     this.cdr.detectChanges();
}

Как говорит Angular docs ngAfterViewInit:

Отвечать после того, как Angular инициализируетпредставления компонента и дочерние представления / представление, в котором находится директива.

Вызывается один раз после первого ngAfterContentChecked ().

Answer 2

Вам необходимо установить фильтр для вашего источника данных. Вы только определяете предикат фильтра. Установите атрибут фильтра вашего источника данных в ngOnInit.

ngOnInit() {
  if (history.state.data) {   //history.state.data is passed id
    this.searchKey = history.state.data;
    this.dataSource.filterPredicate = function(data, filter: string): boolean {
      return data.userId.toString() === filter;
    };
    this.dataSouce.filter = this.searchKey; // <-- add this
  } 
}

Answer 3

Почему бы просто не использовать параметры маршрута и @angular/router предоставленный способ передачи данных через параметры маршрута https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero