В этом сообщении блога мы рассмотрим различные способы добавления сообщения «Результаты не найдены» в панель поиска Angular. Когда пользователи выполняют поиск и не находят подходящих результатов, важно предоставить им обратную связь, чтобы оправдать их ожидания и улучшить общее впечатление. Мы обсудим несколько подходов, сопровождаемых примерами кода, для реализации этой функции в вашем приложении Angular.

Метод 1: использование директивы *ngIf

Один простой способ отобразить сообщение «Результаты не найдены» — использовать директиву *ngIf в Angular. Вот пример того, как это можно реализовать:

<input type="text" [(ngModel)]="searchTerm" (input)="performSearch()" />
<div *ngIf="searchResults.length === 0">
  <p>No results found.</p>
</div>

В этом примере мы привязываем входные данные поиска к переменной с именем searchTerm. Событие (input)запускает метод performSearch(), который заполняет массив searchResults. Если массив пуст, отобразится сообщение «Результаты не найдены».

Метод 2: нестандартная труба

Другой подход — создать собственный канал, который фильтрует результаты поиска и при необходимости отображает сообщение «Результаты не найдены». Вот пример:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'noResults'
})
export class NoResultsPipe implements PipeTransform {
  transform(items: any[], searchTerm: string): any[] {
    const filteredItems = items.filter(item => item.name.includes(searchTerm));

    if (filteredItems.length === 0) {
      return [{ name: 'No results found.' }];
    }

    return filteredItems;
  }
}

Чтобы использовать этот канал, вам необходимо включить его в объявления вашего модуля и применить в шаблоне:

<input type="text" [(ngModel)]="searchTerm">
<div *ngFor="let item of items | noResults: searchTerm">
  {{ item.name }}
</div>

Пользовательский канал noResultsфильтрует массив itemsна основе searchTerm. Если совпадений не обнаружено, добавляется один элемент с сообщением «Результаты не найдены». в отфильтрованный массив, который затем отображается в шаблоне.

Метод 3: реактивные формы и валидаторы

Если вы используете реактивные формы Angular, вы можете использовать проверку формы для отображения сообщения «Результаты не найдены». Вот пример:

<form [formGroup]="searchForm">
  <input type="text" formControlName="searchTerm">

  <div *ngIf="searchForm.controls.searchTerm.invalid && searchForm.dirty">
    <p>No results found.</p>
  </div>
</form>

При таком подходе мы создаем группу форм под названием searchFormи элемент управления формой под названием searchTerm. Проверив правильность элемента управления и наличие изменений (dirty), мы можем отобразить сообщение «Результаты не найдены».

Внедрение сообщения «Результаты не найдены» в строке поиска Angular имеет решающее значение для улучшения пользовательского опыта. Используя такие методы, как директива *ngIf, пользовательские каналы или реактивные формы с валидаторами, вы можете предоставить ценную обратную связь пользователям, когда их поисковые запросы не дают результатов. Не забудьте адаптировать подход к вашим конкретным требованиям и предпочтениям в дизайне.