【问题标题】:Can't persist results of [ngbTypeahead] to [resultTemplate]无法将 [ngbTypeahead] 的结果保存到 [resultTemplate]
【发布时间】: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


    【解决方案1】:

    这可能是因为您没有在 api 调用之前放置 return

    else {
            return this.myApiCall.employeeSearch(term)
    .....
    

    【讨论】:

    • 好眼力的人!完全是这样,非常感谢您的帮助,有时您真的需要外在的眼睛才能看到某些东西,哈哈。感谢您的帮助!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-13
    • 2021-06-26
    • 2021-06-21
    • 1970-01-01
    • 2018-08-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多