Я пытаюсь отобразить данные, используя таблицу угловых материалов.Но он не отображает никаких данных и не регистрирует никаких ошибок. Я получаю мои данные, вызывая службу.
HTML: -
<div>
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="isbn">
<mat-header-cell *matHeaderCellDef> ISBN </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.isbn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.title}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sector">
<mat-header-cell *matHeaderCellDef> Sector </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.sector}} </mat-cell>
</ng-container>
<ng-container matColumnDef="pubDate">
<mat-header-cell *matHeaderCellDef> Publication Date </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.pubDate}} </mat-cell>
</ng-container>
<ng-container matColumnDef="itemType">
<mat-header-cell *matHeaderCellDef> Item Type </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.itemType}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let item; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
TypeScript:
export class DisplayAllitemsComponent implements OnInit {
message:string;
items:string[]=[];
displayedColumns = ['isbn','title','sector','pubDate','itemType'];
dataSource: MatTableDataSource<Item>;
constructor(private appService: AppService) {
this.appService.getAllItems()
.subscribe((data: any) => {
this.dataSource = new MatTableDataSource(data);
console.log(this.dataSource)
});
}
}
Интерфейс: -
export interface Item {
isbn: string;
title: string;
sector: string;
pubdate: string;
itemtype: string;
}
, и я зарегистрировал источник данных, и это оно.