angular - 角材料表不显示任何数据
问题描述
我的 Angular Material 表没有显示任何数据。它也不会抛出任何异常,也不会发生任何奇怪的事情。我已经阅读了其他几篇 stackoverflow 帖子,但找不到任何有用的东西。
这是我在 sortedData 包含 12 个问题对象时得到的结果。如您所见,行已显示但未填充任何数据
提前致谢!
问题表.html:
<div class="mat-elevation-z8">
<table *ngIf="sortedData!=null" [dataSource]="sortedData" mat-table class="full-width-table" matSort aria-label="Elements">
<!-- Id Column -->
<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>
<!-- Title Column -->
<ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.title}}</mat-cell>
</ng-container>
<!-- Topic Column -->
<ng-container matColumnDef="topic">
<mat-header-cell *matHeaderCellDef mat-sort-header>Topic</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.topic}}</mat-cell>
</ng-container>
<!-- Subtopic Column -->
<ng-container matColumnDef="subtopic">
<mat-header-cell *matHeaderCellDef mat-sort-header>Subtopic</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.subtopic}}</mat-cell>
</ng-container>
<!-- Type Column -->
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.type}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>
<mat-paginator #paginator
[length]="dataSource?.data.length"
[pageIndex]="0"
[pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
问题界面:
export interface Question {
id?: number;
title?: string;
demand?: string;
type?: QuestionType;
topic?: string;
subTopic?: string;
points?: number;
imgPath?: string;
marking?: boolean;
added?: boolean;
}
question-table.ts 的 ngOnInit:
ngOnInit() {
this.questionService.getQuestions().subscribe(data => {
this.questions = data;
this.sortedData = this.questions;
console.log(this.sortedData)
});
}
解决方案
您想显示displayColumn
属性,但它没有在 .ts 中初始化
你能添加这个并测试:
/** Displayed datatable columns */
displayedColumns = ['id', 'title', 'topic', 'subtopic', 'type'];
ngOnInit() {
this.questionService.getQuestions().subscribe(data => {
this.questions = data;
this.sortedData = this.questions;
console.log(this.sortedData)
});
}
推荐阅读
- html - 如何在引导程序 4 的导航栏下拉菜单中增加 div 大小
- c# - Visual Studios 2017 - 无法将类型“System.Collections.Generic.List<>”隐式转换为“System.Collections.Generic.List<>”
- java - @DataJpaTest 自动装配数据源
- powershell - PowerShell:如何将 $env:HOSTNAME/$env:Computer) 作为文本替换的一部分插入文本文件?
- scala - java.lang.NoSuchMethodError:在纱线集群上提交火花时
- android - 如何使抽屉导航页面可滚动?
- discord.js - 不和谐的js和mysql
- html - 在 Beautiful soup 中使用另一个标签查找标签值
- reactjs - 从 mapStateToProps 到 setState
- python - 代码没有遍历我的 CSV 文件中的每个名称