Как отобразить «Результат не найден» Если в таблице не найдено данных - Angular 8

Question

Я хочу показать "результат не найден" в таблице angular 8 при фильтре. Вот мой пример кода

fromEvent(this.searchParam.nativeElement, 'keyup')
      .pipe(debounceTime(500), distinctUntilChanged())
      .subscribe((event: any) => {
        this.getUsers(event.target.value);
      });

getUsers(searchParam: string = '') {
    this.userService.getUsers(this.page, this.limit, searchParam).subscribe(

      (data: any) => {

        this.users = data.results;
        this.loading = false;
        this.totalRecords = data.totalRecords;
        this.limit = data.limit;
        this.totalPages = Math.ceil(this.totalRecords / this.limit);
      },
      (errors) => {
        this.loading = true;
        this.errmsg = errors.error.message;
      }
    );
  }

          <div class="form-group has-search searchbox">
            <span class="fa fa-search form-control-feedback"></span>
            <input type="text" class="form-control" #searchParam placeholder="Search" />
          </div>

Заранее спасибо

Answer 1

Вы можете добавить скрытый div и отобразить его, используя ngIf. В вашем html:

<div class='empty-result' *ngIf="empty">
No result found.
</div>

В вашем .ts:

empty: boolean = false;
getUsers(searchParam: string = '') {
    this.userService.getUsers(this.page, this.limit, searchParam).subscribe(
      if (data.length === 0) {
      this.empty = true;
      } else {
       this.empty = false;
      }
      (data: any) => {

        this.users = data.results;
        this.loading = false;
        this.totalRecords = data.totalRecords;
        this.limit = data.limit;
        this.totalPages = Math.ceil(this.totalRecords / this.limit);
      },
      (errors) => {
        this.loading = true;
        this.errmsg = errors.error.message;
      }
    );
  }

Вы можете установить тайм-аут, чтобы скрыть сообщение после его отображения.