如何初始化搜索调用？

Question

我有一个组件，它基本上由一个文本框（输入）和一个结果显示区域组成：

<div class="row search">
  <div class="col">
    <input
      id="iptSearch"
      type="text"
      class="form-control"
      placeholder="search blueprints"
      (keyup)="keyUp$.next($event.target.value)"
    />
  </div>
</div>

<ng-container *ngIf="courses$ | async as courses; else loadingCourses">

  <table class="table table-borderless table-responsive-sm">
    <tbody>
      <tr *ngFor="let item of courses | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
        <ew-browse-courses [course]=item></ew-browse-courses>
      </tr>
    </tbody>
  </table>

  <ngb-pagination
    [(page)]="page"
    [pageSize]="pageSize"
    [collectionSize]="courses.length">
  </ngb-pagination>

</ng-container>

<ng-template #loadingCourses>
  <div class="spinner-border"></div>
</ng-template>

在组件中，我使用主题和服务（都是可观察的）来获取搜索文本并将其发送到服务：

import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

import { CourseBrowse } from '../_models/course';
import { CourseService } from '../_services/course.service';

@Component({
  selector: 'ew-course-home',
  templateUrl: './course-home.component.html',
  styleUrls: ['./course-home.component.css']
})
export class CourseHomeComponent implements OnInit {
  courses$: Observable<CourseBrowse[]>;
  keyUp$ = new Subject<string>();

  // pagination
  pageSize = 5;
  page = 1;

  constructor(private courseService: CourseService) { }

  ngOnInit(): void {
  
   // that was another attempt (mimic an "onkeyup")
   // const element: HTMLElement = document.getElementById('iptSearch') as HTMLElement;
   // element.onkeyup; // that's a property of course - there's no method like "keypress"

    this.courses$ = this.keyUp$.pipe(
      // filter(term => term.length >= 3),
      debounceTime(500),
      distinctUntilChanged(),
      switchMap(searchTerm => this.courseService.searchCourses(searchTerm))
    );

    this.keyUp$.next(''); // my ideas was to just send and empty string
  }
}

搜索本身工作正常，我的问题是我无法启动它。如果显示组件，它只会等待输入...

如果用户聚焦输入框并按回车键（搜索空字符串），则服务会按预期返回整个列表（限制为 50 个）。

所以我现在要做的就是将那个空字符串发送给 Subject 以首先执行这个搜索。我使用 keyUp$.next('') 的方法不起作用。我做错了什么？

提前致谢

Answer 1

你可以试试 startWith 操作符

this.courses$ = this.keyUp$.pipe(
      startWith(''),
      // filter(term => term.length >= 3),
      debounceTime(500),
      distinctUntilChanged(),
      switchMap(searchTerm => this.courseService.searchCourses(searchTerm))
    );