Показать сообщение, если длина массива равна 0 в Angular 5

Question

У меня есть скрипт поиска, по которому пользователь может искать людей и т. Д. Я хочу отобразить сообщение, если то, что он или печатает, не существует в массиве. По умолчанию я отображаю некоторые результаты, и он отображает нужного человека, когда кто-то пишет на searchbar. но я хочу показать сообщение, если то, что пользователь пишет на searchbar, не слишком много в массиве. ngfor работает отлично, я просто не могу показать сообщение.

Я сделал ngIf, но не отображаю #noThings при наборе, например, djlsklkssk.

Обратите внимание, чтоuserSet всегда имеет длину> 0, потому что я все равно вызываю API.

<ion-searchbar style="height: 30px" showCancelButton="focus" cancelButtonText="Custom Cancel" animated placeholder="Search Rovespier" [(ngModel)]="terms"></ion-searchbar>

<ion-card *ngFor="let item of userSet | search : terms">
    <div *ngIf="item; else noThings">
        {{}item.name}}
    </div>
</ion-card>
<ng-template #noThings>
    <div>
        No Result
    </div>
</ng-template>

.ts

userSet: any = [];

constructor() {
    this.searchSet();
}

searchSet() {
    this.userData.searchUser()
        .map(res => res.json())
        .subscribe(data => {

            if (data.success) {
                this.userSet = data.searchDetails; // then it is uid_fk
            }
        });
}   

труба

import {
    Pipe, PipeTransform
}
from '@angular/core';

@Pipe({
    name: 'search',
})
export class SearchPipe implements PipeTransform {

    transform(items: any[], terms: string): any[] {
        if (!items) return [];
        if (!terms) return items;
        terms = terms.toLowerCase();
        return items.filter(it => {

            if (it.group_name) {
                return it.group_name.toLowerCase().includes(terms);
            } else if (it.username || it.title) {
                var match_username = it.username ? it.username.toLowerCase().includes(terms) : false;
                var match_title = it.title ? it.title.toLowerCase().includes(terms) : false;
                return match_username || match_title;
            }
            return false;
        });
    }
}

Answer 1

То, что вы пытаетесь сделать, это отфильтровать результаты. Стоит прочитать следующее: Нет FilterPipe или OrderByPipe , где Angular Team пропустила эти каналы и рекомендует:

Команда Angular и многие опытные разработчики Angular настоятельно рекомендуютперемещение логики фильтрации и сортировки в сам компонент. Компонент может предоставлять свойство filteredHeroes или sortedHeroes и контролировать, когда и как часто выполнять вспомогательную логику. Любые возможности, которые вы могли бы поместить в канал и совместно использовать в приложении, можно записать в службу фильтрации / сортировки и внедрить в компонент.

Поэтому я бы предложил перенести это в службу, есливам это нужно для многих компонентов, в противном случае вы можете справиться с этим в компоненте, как простой пример, который я вам привожу здесь:

При получении данных вы присваиваете значения массива двум массивам, одному оригинальному и одному дляфильтрация, например:

ngOnInit() {
  this.myService.getData().subscribe((data: Todo[]) => {
    this.todos = data;
    // this we will display in template
    this.filteredTodos = data;
  });
}

И в строке поиска вы вызываете функцию, например с именем search, которой вы передаете значение, введенное пользователем:

search(term) {
  this.filteredTodos = this.todos.filter(todo => {
    return todo.title.toLowerCase().includes(term.toLowerCase());
  })
}

Затем в шаблоне вы можете просто проверить длину массива filteredTodos и отобразить No results, если длина равна 0:

<input [ngModel]="term"  (ngModelChange)="search($event)"/>

<ul *ngIf="filteredTodos.length; else noThings">
    <li *ngFor="let todo of filteredTodos">
        {{ todo.title }}
    </li>
</ul>

<ng-template #noThings>
    <div>
        No Result
    </div>
</ng-template>

STACKBLITZ образец для вышеуказанного кода.