На странице используется компонент 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)))
);
};
}