Показать сообщение на пустой таблице

Question

Я новичок в Angular.Я реализовал таблицу материалов, куда я загружаю данные из службы и вызываю компонент следующим образом:

 ngOnInit() {
    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    });
  }

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

HTML:

<mat-table>
    //content there
</mat-table>
  <div *ngIf="noResults$ | async"> No results</div>

затем в компоненте что-то вроде этого:

ngOnInit() {
    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      var noResults$ = results.map(d => d.length === 0).startWith(false);

    });
  }

Но я получаю 3 ошибки:

Ошибка 1 (HTML):

Идентификатор 'noResults $' не определен.Объявление компонента, объявления переменных шаблона и ссылки на элементы не содержат такого члена

Я не знаю почему, потому что я объявляю noResults $ для компонента

Ошибка 2 (Компонент):

сообщение: «Свойство« длина »не существует для типа« Пользователь ». '

Почему« длина »ищет свойство?Предполагаемая длина - это метод, который ищет регистр в службе

Ошибка 3 (Компонент):

Свойство 'startWith' не существует для типа 'boolean []'.

Я ничего не знаю об этой ошибке

Помощь очень ценится.С уважением

Полный компонент:

import {
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  ViewChild,
  ElementRef
} from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

import { UsuariosService } from "../../../../../_services/usuarios.service";
import { Observable } from "rxjs/Observable";
import {
  DataSource,
  CollectionViewer,
  SelectionModel
} from "@angular/cdk/collections";
import { BehaviorSubject } from "rxjs";
import {
  MatSort,
  MatSortable,
  MatTableDataSource,
  MatPaginator,
  MatPaginatorIntl
} from "@angular/material";


import { SwalComponent } from "@toverux/ngx-sweetalert2";

@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})
export class UsuariosComponent {
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild("filter") filter: ElementRef;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild("deleteSwal") private deleteSwal: SwalComponent;

  // Bootstrap switch
  public yes: string = "SI";
  public no: string = "NO";
  public green: string = "green";
  public gray: string = "gray";
  public disabled: boolean = false;
  public status: boolean = false;
  public normal: string = "small";
  //end Bootstrap switch

  public eliminar: string = "ELIMINAR";
  public cancelar: string = "CANCELAR";
  public red: string = "red";


  selection = new SelectionModel<string>(true, []);
  dataSource;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  displayedColumns = [
    "id",
    "nombre",
    "apellido",
    "email",
    "perfil",
    "ultimoLogin",
    "activo",
    "action"
  ];

  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService,
    private UsuariosService: UsuariosService
  ) {}

  ngOnInit() {
    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
      var noResults$ = results.map(d => d.length === 0).startWith(false);

    });
  }

  onFlagChange(event, { id }) {
    const body: any = {
      usuarioId: id,
      activo: event
    };
    this.UsuariosService.postSwitch(body).subscribe(
      () => {
        //React to your HTTP request success
        this.toastr.success("El Usuario se ha actualizado correctamente.");
      },
      err => {
        this.toastr.error("Ocurrió un error al actualizar Usuario.");
        //React to your HTTP request error
      }
    );
  }
  deleteUser(userid) {
    debugger;
    this.UsuariosService.eliminar(userid).subscribe(
      () => {
        this.toastr.success("El usuario se ha eliminado con éxito.");
      },
      err => {
        this.toastr.error("Ocurrió un error al eliminar Usuario.");
      }
    );
  }
}

Обновление

Первая проблема решена добавлением noResults$ как public noResults$: any;

ивызвать метод так же просто, как:

this.noResults$ = results.map(d => d.length === 0).startWith(false);

Answer 1

Функция map используется для преобразования каждого элемента в массиве.

Когда вы делаете:

results.map(d => d.length === 0).startWith(false);

При попытке проверить lengthсобственность каждого пользователя.Наконец, он пытается использовать startWith для нового массива, но у массивов нет функции startWith.

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

this.noResults = d.length === 0;

Обратите внимание, что я не использовал noResults$ в качестве имени переменной.Имя должно заканчиваться на $, только если оно является Наблюдаемым, но в этом случае это не так.

Answer 2

вы можете установить else для ngIf и задать шаблон, который будет отображаться в этом случае.

<mat-table *ngIf="dataSource.data; else placeholder">
    //content there
</mat-table>
<ng-template #placeholder>
   <div> No results</div> 
</ng-template>

дополнительную информацию вы можете найти здесь https://toddmotto.com/angular-ngif-else-then#ngif-and-else

Answer 3

1) HTML-код ищет переменную noResults$, прежде чем она будет обработана хуком OnInit.Вам нужно определить его до визуализации компонента (перед конструктором) и ссылаться на него в функции OnInit следующим образом:

ngOnInit() {
this.UsuariosService.getUser().subscribe(results => {
  if (!results) {
    return;
  }
  this.dataSource = new MatTableDataSource(results);
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
  this.noResults$ = results.map(d => d.length === 0).startWith(false);

  });
}

2 & 3) Вам не нужно отображать ответ, если выиспользование Angular HTTPClient для создания запроса get, который может быть причиной обеих этих ошибок.Вы должны выполнить следующее, чтобы проверить, что назначено d.

ngOnInit() {
  this.UsuariosService.getUser().subscribe(results => {
    if (!results) {
      return;
    }
    this.dataSource = new MatTableDataSource(results);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    console.log(results)
    this.noResults$ = results.map(d => {
      console.log(d)
   }).startWith(false);
 });
}