Question

我的Angular Material表未显示任何数据。它也不会引发任何异常，也不会引起任何其他异常。我已经阅读了其他一些stackoverflow帖子，但是找不到任何有用的信息。

here is what i get when sortedData contains 12 question-objects. So as you can see the rows are displayed but not filled with any data

谢谢！

question-table.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)
    });   
  }

Answer 1

您要显示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)
  });   
}

Answer 2

您在组件初始化方法和表格视图中犯了错误，请在下面查看我的代码

this.dataSource = new MatTableDataSource(ELEMENT_DATA);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;

Demo Example for Table & shorting using Angular Material

角材料表不显示任何数据

2 个答案: