0

На странице используется компонент Typehead
Есть массив данных, который выводятся в этом компоненте:

[{id: 1, address: 'cat'}, {id: 2, address: 'dog'}]

Данные в списке выводятся как положено, но если кликнуть на элемент списка, то в input выводится [object Object]:
введите сюда описание изображения


Как вывести address выбранного в списке объекта?
При этом не использовать ng-template, так как я думаю что это слишком неоправданным для такой простой задачи.


Компонент настроен следующим образом:

Html:

<input
    id="typeahead-focus"
    type="text"
    class="form-control"
    [(ngModel)]="model"
    [ngbTypeahead]="search"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
    [resultFormatter]="formatter"
    #instance="ngbTypeahead"
/>

TS:

@Component({
  selector: 'ct-typeahead',
  templateUrl: './typeahead.component.html',
  styleUrls: ['./typeahead.component.sass']
})
export class TypeaheadComponent implements OnInit {
    model: any;
    values: any[];
    formatter = (result: any) => result.address;

    constructor() { 
        this.values = [{id: 1, address: 'cat'}, {id: 2, address: 'dog'}]
    }

    ngOnInit() { }

    @ViewChild('instance') instance: NgbTypeahead;
    focus$ = new Subject<string>();
    click$ = new Subject<string>();

    search = (text$: Observable<string>) => {
        const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
        const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
        const inputFocus$ = this.focus$;

        return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
            map(term => (term === '' ? this.values
                : this.values.filter(v => v.address.toLowerCase().indexOf(term.toLowerCase()) > -1)))
        );
    };
}
0

1 ответ 1

1

Во-первых у меня возник вопрос откуда берется переменная searchString внутри функции indexOf, но то ладно.

Во-вторых ngModel это здорово, но input не понимает, что такое объект и приводит объект к строке ({}).toString() => [object Object]. Если добавить вот такой геттер в компонент:

public get value(): string {
    if (this.model && this.model.address) {
        return this.model.address;
    }

    return this.model;
}

И использовать байндинг атрибута на input:

<input .... [value]="value">

model станет объектом после клика на кнопку dropdown-item, а до этого model это строка, когда вы вводите что-то в сам input.

Либо же можно использовать байндинг inputFormatter. Если fomatter используется для форматирования результатов поиска, то inputFormatter используется для форматирования выбранного значения и отображения его в input.

2
  • Хорошее решение! Я нашел еще кое что. Можно использовать атрибут inputFormatter, эффект тот же. В доках с примерами такого не было, но в доках Аpi компонента это есть. Я просто добавил [inputFormatter]="formatter". Возможно это стоит добавить в ответ.
    – Max
    30 янв 2019 в 22:21
  • 1
    @Max, обновил ответ 31 янв 2019 в 4:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.