我正在一个使用Angular and Material Design的项目中，并且我想使用“自动完成”功能来让用户通过其name属性从对象列表中进行搜索。
Angular Material Autocomplete Docs
我正在读取一个JSON文件，并试图生成一个对象列表，我可以通过它们的name属性轻松地对其进行搜索。
“ champion.json”具有数据属性，该属性是JSON对象的列表，我需要“名称”，“键”和“ pic”（这是png文件的URL）。
我创建了一个服务，该服务使用HTTPClient从静态API或资产文件夹中获取JSON对象。
到目前为止，我已经测试并发现可以通过使用* ngFor直接遍历对象列表来查看列表中的对象，但是我想使用* ngFor异步显示过滤的对象列表。但是，每当我切换到“让filteredObjects | async对象”时，对象列表都不会显示，异步管道对我从读取JSON文件生成的可观察对象列表不起作用。
我的理论是，在读取json文件之后，我需要定义/生成过滤后的对象列表，否则我将错误地定义过滤器功能。
您可以在stackblitz上看到代码，但是我是新手，甚至无法与import { Component, OnInit } from '@angular/core';
import { SwPush } from '@angular/service-worker';
import { PushNotificationService } from '../../services/push-notification.service';
const VAPID_PUBLIC = "BJPrg7jbhWkWZn5mhg0Wti8031cHjsLGyN1G4pmfeippmEsXHo53wnRiqqjApVkA1KQyIz0IYK4ln0ie7RLrsiI";
const PRIVATE = "D1njq6Y7ny2QexJ-JZXbUpufCkfIywLSMvO6s-iSNoQ";
@Component({
selector: 'app-test-component',
templateUrl: './test-component.component.html',
styleUrls: ['./test-component.component.scss']
})
export class TestComponentComponent implements OnInit {
constructor(public swPush: SwPush, public pushService: PushNotificationService) {
}
test(){
if (this.swPush.isEnabled) {
this.swPush
.requestSubscription({
serverPublicKey: VAPID_PUBLIC
})
.then(subscription => {
this.pushService.sendSubscriptionToTheServer(subscription).subscribe();
})
.catch(console.error);
}
}
ngOnInit() {
}
}
一起使用，该代码确实显示在我的开发服务器上（ng serve）。我认为材料设计依赖关系未正确安装，但不知道为什么。 My app on stackblitz
答案 0 :(得分：0)
我解决了。自动填充正在运行，可能是因为应用了过滤器，因为它具有“ startWith（''）”，所以我只是没看到任何列出的东西，所以直到我键入内容之前，什么都没有显示。