Angular Material自动完成未显示

时间:2019-11-09 12:01:13

标签: angular autocomplete angular-material

大约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

我希望这里有人可以帮助我解决我的问题。

提前谢谢!

0 个答案:

没有答案