时间戳

首页 > 解决方案 > ngx-bootstrap typeahead with itemTemplate for object

angular - ngx-bootstrap typeahead with itemTemplate for object

问题描述

我已经构建了一个 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'])
  )
);

这曾经可以工作，但是在升级了一些东西之后，它就不再起作用了。降级并没有解决问题...

这是一个堆栈闪电战： https ://stackblitz.com/edit/angular-h3khea

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

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

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

标签： angulartypescriptngx-bootstrapngx-formly

解决方案

它适用于typeaheadOptionField：

您可以将其用作“字符串设置器”并传递属性路径甚至方法名称（用于搜索结果对象上的方法）：

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

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

[typeaheadOptionField]="propertyInComponent"

推荐阅读