【发布时间】:2019-02-19 18:44:51
【问题描述】:
我正在使用以下代码在我的 html 中实现 ngbTypeahead
<ng-template #rt let-r="result" let-t="term">
<ngb-highlight [result]="r.FirstName" [term]="t"></ngb-highlight>
</ng-template>
<input name="primaryOwner"
type="text"
class="form-control pl-2"
[(ngModel)]="employee"
[ngbTypeahead]="search"
[resultTemplate]="rt" />
这是搜索功能
search = (text$: Observable<string>) => {
return text$.pipe(
debounceTime(200),
distinctUntilChanged(),
map(term => {
if (term.length < 2) {
return [];
} else {
this.myApiCall.employeeSearch(term)
.then(response => {
if (response.Success) {
return response.Employees;
});
} else {
return [];
}
});
}
})
);
};
这是我通过 map 函数返回的数组类型的示例。
[
{FirstName: "Silvana", LastName: "Joye", IdentificationNumber: "018377", EmailAddress: "Silvana.Joye@company.com"},
{FirstName: "Diarmuid", LastName: "Jochbed", IdentificationNumber: "692543", EmailAddress: "Diarmuid.Jochbed@company.com"},
{FirstName: "Jopa", LastName: "Epp", IdentificationNumber: "913960", EmailAddress: "Jopa.Epp@company.com"}
]
据我所知,我认为我在这里完全按照文档进行操作,但是我无法弹出结果框,而且我不确定我哪里出错了。
这些是我正在使用的技术版本。
"rxjs": "^6.0.0",
"@angular/core": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^3.2.0",
"bootstrap": "4.0.0",
"typescript": "~2.7.2"
【问题讨论】:
标签: html angular typescript rxjs ng-bootstrap