提前关闭通话多次打开后端服务

Question

我已经创建了一个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"
                    />

此代码的问题是： 1.单击输入时不打开 2.输入后，我的后端多次调用 3.键入列表时不缩小 4.毕竟，选择项目后，下拉列表会再次打开（??）

有人会在遇到地雷问题时知道如何使用此预先输入吗？