我已经构建了一个 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 ......