Это напрямую связано с предоставленной вами ссылкой и данными, которые вы используете!
Я видел образцы онлайн
(https://stackblitz.com/edit/angular-w9ckf8?file=app%2Fapp.component.ts)
и он работает нормально, даже если я удаляю некоторые данные. Интересно, почему мой
нет.
Ваш component.html
может выглядеть примерно так: ~
<mat-toolbar color="primary">My full table</mat-toolbar>
<mat-table #table [dataSource]="yetAnotherdataSource" matSort *ngIf="yetAnotherdataSource.length > 0">
<ng-container matColumnDef="ID">
<mat-header-cell *matHeaderCellDef mat-sort-header>ID </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Date">
<mat-header-cell *matHeaderCellDef mat-sort-header>Date </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="AM IN">
<mat-header-cell *matHeaderCellDef mat-sort-header>Am_in </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.am_in?.time}} </mat-cell>
</ng-container>
<ng-container matColumnDef="AM OUT">
<mat-header-cell *matHeaderCellDef mat-sort-header>Am_out </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.am_out?.time}} </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="yetAnotherdataSource.length === 0">No data</div>
и ваш component.ts
имеет данные, которые вы предоставили: ~
import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 5';
displayedColumns = ['ID', 'Date', 'AM IN', 'AM OUT'];
yetAnotherdataSource = [
{
id: "123",
date: "2019-04-15",
am_in: { id: "0001", time: "08:00 AM" }
},
{
id: "456",
date: "2019-04-16",
am_in: { id: "0031", time: "07:00 AM" },
am_out: { id: "0041", time: "11:24 AM" }
}
];
}
Надеюсь, это полезно!