Функция автоматического завершения множественного выбора - Угловая стружка материала

Question

Я использую Angular 7 & Angular Material для получения имени пользователя из API.Для этого я использовал сколы углового материала.Вот ссылка, по которой я следую:

https://stackblitz.com/angular/jemmxnqdyro?file=app%2Fchips-autocomplete-example.ts

Но проблема в том, что в настоящее время я получаю данные из массива.Что мне действительно нужно, так это получить имя пользователя из этого API: https://jsonplaceholder.typicode.com/users. Что меня смущает, так это то, как использовать сколы из углового материала и как получать данные.

Не могли бы вы помочь мне реализоватьто же самое, так как я новичок в angular.

Было бы очень полезно, если бы кто-то мог показать демонстрацию по этому вопросу.

Заранее спасибо.

Answer 1

ЗДЕСЬ РАБОЧИЙ ПРИМЕР СТАКБЛИЦА согласно вашему запросу.

Что вы должны сделать сейчас:

1- Создайте модель для ваших данных и используйте ее в Сервисе и подписке (вы можете видеть, что я использую 'any' в моем методе подписки.

2- Измените имена переменных соответственно (usernameCtrl, allUsernames вместо allFruits и т. Д.)

3 - Если вы хотите удалить элемент из параметров автозаполнения, если он уже выбран, удалите его (метод remove в ts) из массива allUsernames (теперь allFruits) и добавьте его в массив usernames, обязательно сделайте обратное, когда Пользователь выбирает удаление чипа, вы можете поиграться с другими методами, чтобы сделать желаемую функциональность.

Чтобы мгновенно применить изменения массива к автозаполнению, не забудьте this.fruitCtrl.setValue(null);