我正在开发一个使用 Angular 和 Material Design 的项目，我想使用自动完成功能让用户按名称属性从对象列表中进行搜索。
我正在阅读一个 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 上的应用