Я работаю над проектом, в котором используется Angular и Material Design, и я хочу использовать автозаполнение, чтобы пользователи могли выполнять поиск из списка объектов по их атрибуту имени.
Angular Material Autocomplete Docs
Я читаю файл JSON и пытаюсь составить список объектов, которые я могу легко найти по их атрибуту имени.
"champion.json" имеет атрибут данных, который представляет собой списокобъектов JSON, которые мне нужны, «name», «key» и «pic», которые являются URL-адресами для файла png.
Я создал службу, которая использует HTTPClient для получения объекта JSON из статического APIили из папки с активами.
До сих пор я тестировал и обнаружил, что могу просматривать объекты в списке, напрямую просматривая список объектов с помощью * ngFor, но я хочу использовать * ngFor для отображениясписок отфильтрованных объектов асинхронно.Тем не менее, список объектов не отображается всякий раз, когда я переключаюсь на «позволить объекту FilterObjects | Async», асинхронный канал не работает в списке наблюдаемых объектов, который я получаю при чтении файла JSON.
Моя теория состоит в том, что мне нужно определить / сгенерировать список отфильтрованных объектов ПОСЛЕ того, как я прочитал файл json, иначе я неправильно определяю свою функцию фильтра.
Вы можете увидеть код на stackblitz, ноЯ новичок в его использовании и даже не могу заставить его работать с <mat-option *ngFor="let champ of championList" [value]="champ">, который отображается на моем сервере dev (ng serve).Я думаю, что зависимость от дизайна материала установлена неправильно, но не знаю почему. Мое приложение на stackblitz