CODEWITHSUNDEEP
angulartypescripthtml-tabledatatableangular-material
Florian
Florian

Reputation: 13

Angular Material table not displaying any data

My Angular Material table is not displaying any data. It also does not throw any exception nor does anything else weird. I have already read through several other stackoverflow posts but could not find anything helpful.

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

Thanks in advance!

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>

Question-Interface:

export interface Question {
  id?: number;
  title?: string;
  demand?: string;
  type?: QuestionType;
  topic?: string;
  subTopic?: string;
  points?: number;
  imgPath?: string;
  marking?: boolean;
  added?: boolean;
}

ngOnInit of question-table.ts:

ngOnInit() {
      this.questionService.getQuestions().subscribe(data => {
      this.questions = data;
      this.sortedData = this.questions;
      console.log(this.sortedData)
    });   
  }

Upvotes: 1

Views: 4447

Answers (2)

Mohd Abdul Baquee
Mohd Abdul Baquee

Reputation: 449

You are making mistakes into component init method as well as table view please see my code below

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

Demo Example for Table & shorting using Angular Material

Upvotes: 1

Emilien
Emilien

Reputation: 2761

You want to display displayColumn property, but it's not initialized in .ts

Could you add this and test :

/** 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)
  });   
}

Upvotes: 3

Related Questions