如何用AJAX实现Angular Material 2自动完成

我在我的Angular 4项目中使用Angular Material 2 Autocomplete。在这种情况下，如何实现从HTTP调用加载自动完成值

有人能给我一个Plunker演示吗？谢谢你

首先，你应该尝试解决你的问题，但幸运的是我很无聊，会给出答案；）

在此示例中，我使用：

我们将JSON结果存储为

users

中的可观察结果。然后我们有了可观察的

filteredusters

，它将显示在模板中。由于这是一个http请求，我们希望使用您选择的

distinctUntilChanged

和

debounceTime

来限制http请求。我们用于捕获用户正在键入的值的formcontrol在本例中为

searchCtrl

。在收听

valueChanges

时，我们使用

switchMap

将结果展平

因此，基于上述注释，您的代码如下所示：

更新（rxjs 6）

this.filteredUsers=this.searchCtrl.valueChanges.pipe(
startWith（空），
去BounceTime（200），
distinctUntilChanged（），
开关映射（val=>{
返回此.filter（val | |“”）
})
)
}
筛选器（val:string）{
返回此.users.pipe(
映射（response=>response.filter（选项=>{
return option.name.toLowerCase（）.indexOf（val.toLowerCase（））==0
}))
)
}

对于模板，我们使用

async

管道：

{{user.name}

---

旧版：

this.filteredUsers=this.searchCtrl.valueChanges
.startWith（空）
.debounceTime（200）
.distinctUntilChanged（）
.switchMap（val=>{
返回此.filter（val | |“”）
})      
筛选器（val:string）{
返回此文件。用户
.map（response=>response.filter（选项=>{
return option.name.toLowerCase（）.indexOf（val.toLowerCase（））==0
}));
}

---

我似乎收到了一个错误，我得到了响应。过滤器不是一个函数，即使我从服务器返回了数据！，谢谢你的提琴。必须添加这个-

导入'rxjs/Rx'。