带引导输入的角度答案

【问题标题】：angular with bootstrap typeahead带引导输入的角度
【发布时间】：2018-12-09 05:54:24
【问题描述】：

我一直在努力让我的 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 弹出窗口的同一行中显示前 2 个值，在第 2 行中显示第 3 个值。（服务返回 3 个项目。）

有什么想法吗？

【问题讨论】：

你必须在循环中创建字头？
我认为你的输入错误，我认为是 items.reduce((acc, cur) => [...acc, cur.name], []) -not double [-
@Eliseo 正如我之前所说，单括号给了我错误，而双括号没有给我任何错误，但是前两个字符串被放入了预先输入弹出窗口中的一行。
@PareshGami 如果我在循环中创建预输入，它给了我同样的错误。

标签： angular twitter-bootstrap bootstrap-4 ng-bootstrap bootstrap-typeahead

【解决方案1】：

目前的 Bootstrap Typeahead 似乎不适用于 switchMap 但 map ，如文档中的示例所示。

【讨论】：