как отобразить результат поиска в Angular - PullRequest
Новая
       6

как отобразить результат поиска в Angular

0 голосов
/ 28 марта 2020

Я работаю над проектом Mat-Chips Angular, и мне интересно, как я могу отобразить результат ввода пользователя.

Так что сейчас у меня есть пользовательский ввод и данные внутри TS file.

В поле поиска я хочу отобразить результат в виде числа, сколько элементов соответствует, когда пользователь находит что-то, и если нет ничего, что соответствует, тогда отображаем "Мы нашли {#} элемент, когда мы поиск {какой бы ни был текущий пользовательский текст}}.

Просто чтобы уточнить, 

User input "Adam" and find 3 chips
Display => We found "3" item when we search for "Adam"

User input "Jack"
Display => We found "0" item when we search for "Jack"

Вот мой проект стекаблиц https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-lfrxc4

Любая помощь будет по достоинству оценена.

1 Ответ

0 голосов
/ 28 марта 2020

Рабочая Штакблиц - https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-nxabae

<div [ngClass]="[users.length ? 'w-20' : 'w-50']">
        <p style="margin-top: 25px;">

            <input [formControl]="inputCtrl" matInput class="input" >
      <br>
        <mat-hint *ngIf="_filteredTags.length >0;else noResults">
          <p *ngIf="inputCtrl.value"> We found ({{_filteredTags?.length}}) item when we search for "{{inputCtrl.value}}"</p>
        </mat-hint>

        </p>
            <div class="tag-header">Tags</div>
            <div style="margin-left: 40px; margin-top: 25px;">
                <div>
                    <mc-tags (tagFilterValue)="_filterTags($value)" [chips]="_filteredTags"></mc-tags>
                </div>
            </div>
    </div>
      <ng-template #noResults>
        <div>We found ({{_filteredTags?.length}}) item when we search for "{{inputCtrl.value}}"  </div>
      </ng-template>
    ```
...