Как показать пустое сообщение в динамической таблице угловых данных - PullRequest
Новая
       8

Как показать пустое сообщение в динамической таблице угловых данных

0 голосов
/ 11 февраля 2019

Я пытаюсь показать пустое сообщение об ошибке, когда фильтр не соответствует: 

<div *ngIf="dataSource.length === 0">No data</div>

, но это не работает, потому что я строю динамическую таблицу с MatTableDataSource.

Для лучшего понимания я изменил свою динамическую таблицу для предопределенного массива. 

const ELEMENT_DATA: MembersElement[] = [
{ name: 'Jenny', age: 17 },
{ name: 'Daniel', age: 18 }
];

Однако необходимо использовать MatTableDataSource для динамического построения таблицы пользователей

Это все моиts code. 

    import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material';

export interface SociosElement {
  nombre: string;
  edad: number;
}

const ELEMENT_DATA: MembersElement[] = [
  { name: 'Jenny', age: 17 },
  { name: 'Daniel', age: 18 }
];

@Component({
  selector: 'app-pruebas',
  templateUrl: './tableMembers.component.html',
  styleUrls: ['./tableMembes.component.css']
})
export class PruebasComponent {
  displayedColumns: string[] = ['name', 'age'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

Это мой HTML-код. 

<mat-toolbar color="primary">My full table</mat-toolbar>
<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="age">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">
    </mat-row>
</mat-table>
<div *ngIf="dataSource.length === 0">No data</div>

Ответы [ 2 ]

0 голосов
/ 06 апреля 2019

Одно предостережение об использовании ngIf.Если вы используете matSort и вкладываете таблицу в блок, используя * ngIf, то сортировка не будет работать, потому что ngIf устанавливает viewChild в значение undefined. Ссылка

Используйте [ngClass], чтобы обойти это 

<div [ngClass]="dataSource.filteredData.length > 0 ? 'visible': 'hidden'">
  <mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="age">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Age </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.age}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="row.toggle(row)">
    </mat-row>
  </mat-table>
</div>
<div [ngClass]="dataSource.filteredData.length > 0 ? 'hidden': 'visible'">
  <tr>No results found.</tr>
</div>

Вот CSS для классов 

.hidden {
  visibility: hidden;
}

.visible {
  visibility: visible;
}
0 голосов
/ 11 февраля 2019

Вы не можете достичь того, что хотите, используя условие *ngIf="dataSource.length === 0" просто потому, что источник данных вообще не меняется, когда вы выполняете фильтрацию.что вам нужно сделать, это следить за длиной отфильтрованных данных.Вы можете использовать что-то вроде следующего: *ngIf="dataSource.filteredData.length > 1" в качестве условия.длина datasource.filteredData изменяется на основе отфильтрованных результатов.это условие может скрыть ваш стол.Вы можете поместить это в свой тег таблицы как: <table mat-table [dataSource]="dataSource" *ngIf="dataSource.filteredData.length > 1">

...