Перейти к содержанию

Урок 13: Добавление функции поиска в ваше приложение

Этот обучающий урок демонстрирует, как добавить функцию поиска в ваше приложение Angular.

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

Затраты времени: ожидайте, что на выполнение этого урока вы потратите около 20 минут.

Перед началом

Этот урок начинается с кода из предыдущего урока, поэтому вы можете:

  • Использовать код, созданный в Уроке 12, в своей интегрированной среде разработки (IDE).

  • Начните с примера кода из предыдущего урока. Выберите код из Урока 12, где вы можете:

    • Использовать живой пример в StackBlitz, где интерфейс StackBlitz является вашей IDE.

    • Использовать download пример и открыть его в вашей IDE.

Если вы не просмотрели введение, посетите Введение в Angular tutorial, чтобы убедиться, что у вас есть все необходимое для завершения этого урока.

Если у вас возникнут трудности во время этого урока, вы можете просмотреть готовый код для этого урока.

После завершения

  • Ваше приложение будет использовать данные из формы для поиска подходящего жилья
  • Ваше приложение будет отображать только подходящие места для жилья.

Шаги урока

Выполните следующие шаги в коде приложения в вашей IDE.

Шаг 1 — Обновление свойств компонента home

В этом шаге вы обновите класс HomeComponent для хранения данных в новом свойстве массива, которое вы будете использовать для фильтрации.

  1. В src/app/home/home.component.ts добавьте новое свойство к классу под названием filteredLocationList.

    1
    filteredLocationList: HousingLocation[] = [];

    Список filteredLocationList содержит значения, которые соответствуют критериям поиска, введенным пользователем.

  2. По умолчанию при загрузке страницы filteredLocationList должен содержать полный набор значений местоположений жилья. Обновите конструктор для HomeComponent, чтобы установить это значение.

    1
2
3
4
    constructor() {
    this.housingLocationList = this.housingService.getAllHousingLocations();
    this.filteredLocationList = this.housingLocationList;
}

Шаг 2 — Обновление шаблона домашнего компонента

Компонент HomeComponent уже содержит поле ввода, которое вы будете использовать для получения ввода от пользователя. Этот строковый текст будет использоваться для фильтрации результатов.

  1. Обновите шаблон HomeComponent, чтобы включить переменную шаблона во входные данные под названием #filter.

    1
2
3
4
5
    <input
    type="text"
    placeholder="Filter by city"
    #filter
/>

    В этом примере используется переменная шаблона для получения доступа к input в качестве его значения.

  2. Далее обновите шаблон компонента, чтобы прикрепить обработчик события к кнопке "поиск".

    1
2
3
4
5
6
7
    <button
    class="primary"
    type="button"
    (click)="filterResults(filter.value)"
>
    Search
</button>

    Привязавшись к событию click на кнопке, вы можете вызвать функцию filterResults. Аргументом функции является свойство value переменной шаблона filter. Точнее, свойство .value из HTML-элемента input.

  3. Последнее обновление шаблона касается директивы ngFor. Обновите значение ngFor, чтобы перебирать значения из массива filteredLocationList.

    1
2
3
4
    <app-housing-location
    *ngFor="let housingLocation of filteredLocationList"
    [housingLocation]="housingLocation"
></app-housing-location>

Шаг 3 — Реализация функции обработчика события

Шаблон был обновлен для привязки функции filterResults к событию click. Далее ваша задача — реализовать функцию filterResults в классе HomeComponent.

  1. Обновите класс HomeComponent, чтобы включить в него реализацию функции filterResults.

    1
2
3
4
5
6
7
8
9
    filterResults(text: string) {
    if (!text) {
        this.filteredLocationList = this.housingLocationList;
    }

    this.filteredLocationList = this.housingLocationList.filter(
        housingLocation => housingLocation?.city.toLowerCase().includes(text.toLowerCase())
    );
}

    Эта функция использует функцию фильтра String для сравнения значения параметра text со свойством housingLocation.city. Вы можете обновить эту функцию для сравнения с любым свойством или несколькими свойствами, чтобы сделать это более интересным упражнением.

  2. Сохраните свой код.

  3. Обновите браузер и убедитесь, что при нажатии кнопки "Поиск" после ввода текста можно выполнить поиск данных о местоположении жилья по городу.

    filtered search results based on user input

Обзор урока

В этом уроке вы обновили свое приложение, чтобы:

  • использовать переменные шаблона для взаимодействия со значениями шаблона
  • добавить функциональность поиска с помощью привязки событий и функций массива.

Если у вас возникли трудности с этим уроком, вы можете просмотреть готовый код.

Следующие шаги

Дополнительная информация

Для получения дополнительной информации о темах, рассмотренных в этом уроке, посетите:

Ссылки

Комментарии