Угловой 6 ngbTypeahead фильтр списка объектов JSON - PullRequest
Новая
       22

Угловой 6 ngbTypeahead фильтр списка объектов JSON

0 голосов
/ 07 июня 2018

У меня есть 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))
    )

Когда я печатаю в typeahead, я получаю:

enter image description here

Но я хотел бы показать имя в объекте json .....

Кроме того, в качестве sidenote ребята из начальной загрузки закрыли это и сказали, что это не ошибка, а запрос функции:

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

Большинство современных элементов управления пользовательского интерфейса работают собъекты независимо от платформы.

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

Пожалуйста, добавьте форматтер, и, поскольку вы используете объект в качестве источника данных, для этого вам нужно отменить ваш объект, чтобы получить нужные поля: 

formatter = (x: {name: string}) => x.name;

Элемент ввода HTML нуждается в еще одном атрибуте[inputFormatter] 

<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="item.outputProjection.name" [ngbTypeahead]="search" [inputFormatter]="formatter" />
0 голосов
/ 07 июня 2018

Добавьте форматер к вашему коду 

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

также, включите форматер в шаблон. 

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