angular - オブジェクトのitemTemplateを使用したngx-bootstrapタイプアヘッド

Question

私は ngx-formly 生成されたフォームで使用する ngx-bootstrap/typeahead コンポーネントを構築しました。検索結果は 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-h3kea

に追加typeaheadOptionField="value.nested"すると動作します。これまで使ったことはありませんが、ドキュメントで見つけました。唯一の問題は、これは固定文字列である必要があるように思われ、.ts ファイルから読み込めないことです。

また、以前のアプリと同じようにすべてが機能する例も見つけました: https://stackblitz.com/edit/angular-8t8dcm-kzbw52

違いはわかりませんが、リアクティブフォームを使用していないようです。そして、Angluar 7 にダウングレードするつもりはありません...