NgbTypeAhead-第一次选择后，弹出窗口消失

问题描述

我有一个场景，用户开始输入地址，进行后端调用并反过来获取地址。现在，获取的地址可以在内部包含更多地址。因此，在选择了第一级地址后，由于下拉列表消失了，所以我无法选择第二级地址。

HTML代码：

<div *ngIf="!showGeoSearchUnitAddress" class="input-typeahead" role="alert" aria-live="assertive">
            <input
              type="text"
              id="{{ idPrefix }}-streetLine1"
              name="streetLine1"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  addressForm.get('streetLine1').invalid && (addressForm.get('streetLine1').touched || submitted)
              }"
              [ngbTypeahead]="searchGeoAddress"
              [resultTemplate]="geoSearchResultTemplate"
              (selectItem)="onGeoSearchSelectItem($event)"
              formControlName="streetLine1"
            />

模板：

    <ng-template #geoSearchResultTemplate let-result="result">
      <div class="text-ellipsis">
        {{ result.address.formattedAddress }}
        <span class="check" *ngIf="result.totalUnitCount > 0"> - {{ result.totalUnitCount }} Addresses </span>
      </div>

  <div *ngIf="showGeoSearchUnitAddress" class="text-ellipsis">
    {{ result.units[0].formattedUnitAddress }}
  </div>
</ng-template>

现在是ts：

searchGeoAddress = (text$: Observable<string>) => {
    return text$.pipe(
      debounceTime(300),distinctUntilChanged(),switchMap((searchString) =>
        this.addressService.searchGeoAddress(searchString,this.addressForm.get('isoCountry').value)
      )
    );
  }

onGeoSearchSelectItem(event) {
    event.preventDefault();

    if (event.item.totalUnitCount > 0) {
      this.showGeoSearchUnitAddress = true;
      this.geoSearchUnitAddresses = event.item.ranges;

      this.searchGeoAddress = () => {
        return this.geoSearchUnitAddresses;
      }     
    }
  }

选择后弹出窗口不会再出现。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）