ngx- bootstrap typeahead с itemTemplate для объекта

Question

Я создал компонент 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 ...

Answer 1

Работает с typeaheadOptionField:

Вы можете использовать его как «установщик строк» ​​и передавать путь к свойству или даже имя метода (для метода в объекте результата поиска):

typeaheadOptionField="my.property"
// or
typeaheadOptionField="myMethod()"

Но вы также можете привязать его к свойству, используя правильный синтаксис:

[typeaheadOptionField]="propertyInComponent"