JSON对象列表的Angular 6 ngbTypeahead过滤器

Question

我有一个ngbTypeahead，它在字段中键入时应该能够查询对象列表。列表“投影”中对象的形式为

{
    code: "6326"
    group: "world"
    name: "WGS 1984"
}

HTML：

<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="item.outputProjection.name" [ngbTypeahead]="search" />

在component.ts类中搜索过滤器代码：

    search = (text$: Observable < string > ) =>
    text$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        merge(this.focus$),
        map(term => (term === '' ? this.projections :
            this.projections.filter(v => v.name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    )

当我输入时，我得到的是：

但是我想显示的是json对象中的名称。

另外，bootstrap的人也关闭了它并说这不是错误，而是功能请求：

https://github.com/valor-software/ngx-bootstrap/issues/749

无论平台如何，大多数现代UI控件都可以使用对象。

Answer 1

将格式化程序添加到您的代码中

formatter = (result: string) => result.name;

另外，将格式化程序添加到模板中。

<input id="typeahead-format" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultFormatter]="formatter" />