如何解决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 举报,一经查实,本站将立刻删除。