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$在发出第一个搜索词之前不会执行任何操作。

使用重播主题可以设置第一个值。

使用RXJS和Angular进行简单的表过滤

2 个答案: