角搜索选项自动完成多个字段

Question

我在一个角项目工作，我想有一个搜索选项和字段从我的api默认数据的表单。当我从搜索中选择一个选项时，我想用新值更新其他字段。假设我的选项列表是这样的[{name:'user1', home:'home1', gender:'gender1'}, {name:'user2', home:'home2', gender:'gender2'}, ....]

当用户进入页面时，字段由选项列表的第一个索引中的数据完成，然后按名称进行搜索选项，当用户输入user2时，其他字段从我的选项列表中获得匹配的值。

有什么建议吗?我尝试了这个解决方案https://material.angular.io/components/autocomplete/examples，但只适用于一个字段。

Answer 1

订阅选项字段:

this.myForm.controls['yourOptionFieldName'].valueChanges.subscribe(value => {
setValue();
});

…当选项字段更改时，将新对象设置为接收表单

setValue(){
this.myForm.setValue({
name:'user2',
home:'home2',
gender:'gender2'
})
}

别忘了销毁订阅。

我建议如果创建一个检索用户数据的端点就更好了。在你的web应用程序中操作这样的对象是一个坏主意，你可以照顾系统资源…当搜索更改时检索用户数据，然后填充表单。