大约3天后,我尝试使Angular autocomplete工作,但没有成功。页面上的简单示例都不起作用。现在我希望你们中的一些人可以帮助我解决我的问题。
可悲的是,我没有从调试器得到任何错误,堆栈或日志信息。此时,我不确定我的组件是否只是不知道<mat-autocomplete>
标记,还是在获取控件的值时做错了什么。
根据示例,应该出现一个带有选择值的框,但我什至没有得到该框。
简要说明。
我有一个服务,它将调用我的api来获取要在自动完成中显示的所有值(没有很多我需要动态搜索的值)。首先,我只想显示所有条目。
我正在使用的版本
"@angular/animations": "8.0.0",
"@angular/cdk": "~8.2.3",
"@angular/common": "8.0.0",
"@angular/compiler": "8.0.0",
"@angular/core": "8.0.0",
"@angular/forms": "8.0.0",
"@angular/material": "~8.2.3",
"@angular/platform-browser": "8.0.0",
"@angular/platform-browser-dynamic": "8.0.0",
"@angular/platform-server": "8.0.0",
"@angular/router": "8.0.0",
有关完整代码,请参见Gist。
从角形材质(material.module.ts)中加载所有元素,并在app.module.ts中使用它们。
在我的组件(add-groceries.component.ts)中,我通过ngOnInit()
方法加载了视图所需的所有数据。
当我打开视图(add-groceries.component.html)并单击控件(foodName)时,绝对没有任何反应。根据示例,应该出现一个框,其中将显示要选择的元素,但框甚至没有显示。
当前,我添加了一个过滤器功能,以确保在更改输入字段的值时数据存在。一切都在这方面进行,当输入没有值时,整个列表将分配给filteredFood
。
我希望这里有人可以帮助我解决我的问题。
提前谢谢!