ngx-bootstrap 使用对象的 itemTemplate 提前输入

Question

我构建了一个 ngx-bootstrap/typeahead 组件，我在 ngx-formly 生成的表单中使用了它。搜索结果来自 API，我将此组件重复用于不同的对象，因此密钥不是静态已知的。

我希望我的 typeahead 从我的 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'])
  )
);

这曾经有效，但在升级了一些东西后就不再有效了。降级并没有解决问题...

这是一个 stackblitz：https://stackblitz.com/edit/angular-h3khea

如果您将 typeaheadOptionField="value.nested" 添加到，它会起作用。我以前从未使用过它，但在文档中找到了它。唯一的问题是，这似乎需要一个固定的字符串，我无法从我的 .ts 文件中加载它。

我还找到了一个示例，其中一切都像我的应用程序以前一样工作：https://stackblitz.com/edit/angular-8t8dcm-kzbw52

我不确定有什么区别，但它们似乎不使用反应式形式。而且我不会降级到 Angluar 7...

Answer 1

适用于 typeaheadOptionField:

您可以将其用作 "string-setter" 并传递属性路径甚至方法名称（对于搜索结果对象上的方法）：

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

但您也可以使用正确的语法将它绑定到属性：

[typeaheadOptionField]="propertyInComponent"

ngx-bootstrap 使用对象的 itemTemplate 提前输入

ngx-bootstrap typeahead with itemTemplate for object

typescript

ngx-bootstrap

angular

ngx-formly