棱角分明，具有引导式风格

Question

我一直在努力让我的Typeahead工作：

<div *ngFor="let item of items; index as i">
<input type="text" name="name{{i}}" [(ngModel)]="item.name" [ngbTypeahead]="searchItem" />
</div>

组件：

export class MyComponent implements OnInit {
searchItem: any;
ngOninit() {
this.searchItem = (text$: Observable<string>) => text$.pipe(
debounceTime(250),
distinctUntilChanged(),
switchMap((itemName: string) => itemName.length >= 2 ? this.service.getItems() ? of([])),
switchMap((items: Item[]) => items.length > 0 ? items.reduce((acc, cur) => [...acc, cur.name], []) : [])
);
}
}

在运行时，我在Typeahead中键入2个字母后，Angular会给我以下错误：

Cannot find a differ supporting object 'xxxx' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

其中"xxxx"是项的name属性。

但如果我将reduce函数更改为以下内容：

switchMap((items: Item[]) => items.length > 0 ? items.reduce((acc, cur) => [[...acc, cur.name]], []) : [])

如果它返回一个只有一个元素的数组，即另一个数组，Angular不会给我任何错误，但会在Typeahead弹出窗口的同一行显示前两个值，在第二行显示第三个值。(该服务返回3个项目。(

有什么想法吗？

Answer 1

看起来当前的Bootstrap Typeahead不适用于switchMap，而是适用于文档中的map。