角度材料表不顯示任何數據

Question

我的 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)
    });   
  }

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;

使用 Angular Material 進行表格和短路的演示示例