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，如文档中的示例所示。

引导式提前输入

1 个答案: