Простая фильтрация таблиц с помощью RXJS и Angular

Question

Я пытаюсь иметь фильтруемый стол.У меня есть ListComponent, как это:

export class CompanyListComponent implements OnInit {
  companies$: Observable<Company[]>;
  private searchTerms = new Subject<string>();

  constructor(private companyService: CompanyService) { }

  ngOnInit() {
    this.companies$ = this.searchTerms.pipe(
        // wait 300ms after each keystroke before considering the term
        debounceTime(300),

        // ignore new term if same as previous term
        distinctUntilChanged(),

        // switch to new search observable each time the term changes
        switchMap((term: string) => this.companyService.searchCompanies(term)),
    );
}

search(term: string): void {
    this.searchTerms.next(term);
}

И мой HTML выглядит так:

<input #searchBox type="text" class="form-control" id="search-box" (keyup)="search(searchBox.value)">

<table class="table">
  <tr *ngFor="let company of companies$ | async">
    <td>{{company.name}}</td>
  </tr>
</table>

Когда я пишу внутри ввода поиска, таблица фильтруется, как и должно быть.Но когда я обновляю страницу, в таблице вообще нет данных.Появляется после того, как я что-то положил на входЧто я должен сделать, чтобы получить все данные таблицы при загрузке страницы?Я попытался просто начать поиск в ngOnInit, но эти попытки ни к чему не привели.

Answer 1

Если вы хотите, чтобы цепочка была инициализирована при подписке на нее, вы можете использовать startWith.

this.companies$ = this.searchTerms.pipe(
  debounceTime(...),
  distinctUntilChanged(),
  startWith(''),
  switchMap(...)
);

Answer 2

Измените searchTerms на ReplaySubject(1) и создайте значение по умолчанию в конструкторе.

   private searchTerms = new ReplaySubject<string>(1);

   constructor(private companyService: CompanyService) { 
          this.searchTerms.next('');
   }

Когда страница обновляется, searchTerms не генерирует значение, пока пользователь не нажмет клавишу.Это означает, что companies$ ничего не делает до тех пор, пока не будет выдан первый поисковый термин.

Использование темы воспроизведения позволяет вам установить, какое будет первое значение.