Я создал компонент ngx-bootstrap / typeahead, который я использую в своих сгенерированных формах ngx. Результаты поиска поступают из API, я повторно использую этот компонент для разных объектов, поэтому ключи не известны статически.
Я хочу, чтобы моя печатающая головка получала результаты из моего Observable и отображала элементы с помощью моего шаблона:
<div class="widget form-group">
<input id="typeahead-basic"
type="text" class="form-control" autocomplete="off"
[formControl]="formControl"
[formlyAttributes]="field"
[typeahead]="search$"
[typeaheadItemTemplate]="autocompleteItem"
[typeaheadAsync]="true"
/>
<!-- Works with typeaheadOptionField="value.nested" -->
</div>
<ng-template #autocompleteItem let-item="item">
<span>{{ item.value.nested }}</span>
</ng-template>
И наблюдаемое:
search$ = new Observable((observer: Observer<string>) => {
observer.next(this.formControl.value);
}).pipe(
tap(v => console.log('Input: ' + v)),
switchMap(v =>
of([
{value: { nested: "foo"}},
{value: { nested: "bar"}},
{value: { nested: "foobar"}}
])
//of(['foo', 'bar', 'foobar'])
)
);
Раньше это работало, но после обновления некоторых вещей оно больше не работало. Понижение не помогло исправить ситуацию ...
Вот блик стека: https://stackblitz.com/edit/angular-h3khea
Если вы добавите typeaheadOptionField="value.nested"
в, это работает. Я никогда не использовал это раньше, но нашел это в документах. Единственная проблема заключается в том, что кажется, что это должна быть фиксированная строка, и я не могу загрузить ее из моего файла .ts.
Я также нашел пример, где все работает так же, как мое приложение на работу: https://stackblitz.com/edit/angular-8t8dcm-kzbw52
Я не уверен, в чем различия, но, похоже, они не используют реактивные формы. И я не собираюсь понижать до Angluar 7 ...