后台服务多次打前开后关呼叫

我创造了一个 Angular Bootstrap 按一下会打开的输入。这是我的代码:

  resultFormatter = (inventoryModel: InventoryModel) => this.mapResult(inventoryModel);

 const inventories$ = this.recruiterService.getInventories();

    this.search = (text$: Observable<string>) => {
      const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
      const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
      const inputFocus$ = this.focus$;

      return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$, inventories$).pipe(
        filter((val: string) => val !== ''),
        mergeMap(() => inventories$),
        map((inventoryModels: InventoryModel[]) => inventoryModels)
      );
    };

这是磨合 ngOnInit() 方法。我的 html 看起来像:

 <input
                      placeholder="Start typing..."
                      id="inventoryId"
                      type="text"
                      class="form-control"
                      [ngbTypeahead]="search"
                      (focus)="focus$.next($event.target.value)"
                      (click)="click$.next($event.target.value)"
                      [inputFormatter]="resultFormatter"
                      [resultFormatter]="resultFormatter"
                      (selectItem)="onItemSelected($event)"
                      #instance="ngbTypeahead"
                    />

此代码的问题在于: 一。它不会在单击输入时打开 2.输入输入后,我的后端多次调用 三。当键入列表时 四。毕竟,当选择项时,下拉列表将再次打开(?)?)

有人知道在我出问题时如何使用这种字体吗?