angular - 您如何在对象列表上使用管道、地图、过滤器、材质自动完成？

Question

我正在开发一个使用 Angular 和 Material Design 的项目，我想使用自动完成功能让用户按名称属性从对象列表中进行搜索。

Angular 材质自动完成文档

我正在阅读一个 JSON 文件并尝试生成一个对象列表，我可以通过它们的 name 属性轻松搜索这些对象。

“champion.json”有一个 data 属性，它是我需要的 JSON 对象列表，“name”、“key”和“pic”是 png 文件的 URL。

我创建了一个服务，它使用 HTTPClient 从静态 API 或我的资产文件夹中获取 JSON 对象。

到目前为止，我已经测试，发现可以通过使用*ngFor直接遍历对象列表来查看列表中的对象，但是我想使用*ngFor来异步显示过滤后的对象列表。但是，每当我切换到“让过滤对象的对象|异步”时，对象列表都不会显示，异步管道不适用于我通过读取 JSON 文件生成的可观察对象列表。

我的理论是，我需要在读取 json 文件之后定义/生成过滤后的对象列表，否则我错误地定义了过滤器函数。

您可以在 stackblitz 上看到代码，但我不熟悉使用它，甚至无法使用它<mat-option *ngFor="let champ of championList" [value]="champ">显示在我的开发服务器（ng serve）上。我认为材料设计依赖项没有正确安装，但不知道为什么。我在 stackblitz 上的应用

标签： angularautocompleteangular-material

Answer 1

我解决了。自动完成功能可能在我应用过滤器时没有看到任何列出的内容，因为它有“startWith('')”，所以在我输入内容之前什么都没有显示。