Что мы собираемся сделать, так это изменить пример автозаполнения в w3school на Angular.

Вот пример кода.

Поскольку мы переписываем с помощью Angular, нам нужно создать некоторые компоненты.

а. .html part => Используйте некоторые свойства или события, предоставляемые Angular, для настройки всего шаблона.

б. Часть .ts => Переместите код логики, изначально записанный в части .html, в файл .ts, чтобы структура проекта была более простой.

в. .css part=> Добавьте селектор только для того, чтобы решить, будут ли отображаться списки предложений автозаполнения или нет.

д. .service part=› Чтобы получить асинхронные данные с помощью модуля httpClient, предоставляемого Angular, мы создаем код в сервисном компоненте.

.html часть

› строка 7: добавьте элемент привязки свойства [formControl] и назовите его в файле .ts, чтобы мы могли использовать реактивную форму, предоставляемую Angular.

›строка 7: Добавьте привязку события нажатия клавиши к элементу ввода. Пока пользователи нажимают вверх, вниз и ввод, стиль списков предложений будет изменен индексом. Индекс будет увеличиваться или уменьшаться при нажатии пользователем вверх или вниз.

›строка 10: Используйте переменную логического типа, чтобы решить, показывать список предложений или нет.

›строка 13: Используйте *ngFor, чтобы отобразить элементы списка предложений, и слайс, чтобы ограничить количество элементов списка предложений.

›строка 14: Используйте привязку события для обнаружения события щелчка мышью, а также используйте входную ссылку для переноса значения, которое щелкнули пользователи, в файл .ts.

›строка 16: Сделайте значение ввода равным значению привязки и добавьте ссылку, чтобы разрешить привязке события использовать входное значение.

часть .ts

›строка 20: Используйте http-клиент в сервисе, чтобы получить асинхронные данные и установить переменную для сохранения значения. Фактически, пока мы не подпишемся на переменную, функция не будет работать.

›строка 23: при изменении входного значения операторы rxjs будут срабатывать последовательно. Если операции не связаны с входными данными, мы будем использовать оператор tap для работы с функцией.

›строка 27: Используйте startWith(), чтобы сначала выдать пустое заданное значение.

›строка 28: Используйте debounceTime(), чтобы избежать частых запросов данных из бэкенда.

›строка 29: используйте функцию differentUntilChanged() для отправки данных, когда текущее значение отличается от последнего.

›строка 30: Используйте switchMap(), чтобы отменить подписку на последний введенный контент, и используйте только последний входной контент для запроса данных.

›строка 52: когда пользователи используют мышь, чтобы щелкнуть элемент предложения, функция будет запущена и установит значение предложения в элемент управления формой ввода.

›строка 57: когда пользователи используют клавиатуру для выбора элементов предложения, стиль будет меняться в соответствии со значением индекса. И когда пользователи нажимают клавишу ввода, значение предложения будет установлено в поле управления формой ввода.

сервисная часть

›строка 11: Используйте http-клиент для запроса данных по URL-адресу.

›строка 18: когда пользователи вводят поисковый запрос, функция срабатывает для получения данных. Функция будет проверять соответствие содержимого поиска фоновым данным или нет.

JSON-файл

В файле json хранятся данные о стране, которые вы можете получить на веб-сайте w3school.

файл интерфейса

Два файла интерфейса предоставляют типы пар ключей, с которыми нам проще работать с данными.

Заключение:

  • Если мы хотим переписать пример автозаполнения в w3school с помощью Angular, мы должны изменить способ создания HTML-представления. Мы должны использовать *ngIf или *ngFor для создания html-представления.
  • Согласно структуре Angular, мы должны разделить код в файлах .ts, .service и .html по его назначению.
  • Его легче поддерживать со строгой типизированной структурой.