CODEWITHSUNDEEP
angularangular-material2
umutesen
umutesen

Reputation: 2640

Mat-table renders rows but not data

I am using Angular 5 & Material mat-table in my project.

In my component file, I use observable to retrieve data from the service and bind it to a variable on the component. Mat-table displays rows but it does not print data. I tried ngFor and it seems to work. No errors in console. Any ideas why the table is not displayin data?

TS:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

import { NotificationService } from './../../core/services/notification.service';
import { OperationConfiguration } from './../../core/models/operationConfiguration';
import { ProgressBarService } from '../../core/services/progress-bar.service';
import { OperationConfigurationService } from '../../core/services/operation-configuration.service';

@Component({
  selector: 'app-operation-configuration-list',
  templateUrl: './operation-configuration-list.component.html',
  styleUrls: ['./operation-configuration-list.component.css']
})
export class OperationConfigurationListComponent implements OnInit {

  operationConfigurations: OperationConfiguration[];
  columnsToDisplay: ['id', 'columnName', 'hidden'];

  constructor(private progressBarService: ProgressBarService,
    private notificationService: NotificationService,
    private configurationService: OperationConfigurationService) {
    this.progressBarService.show();
  }

  ngOnInit() {
    this.loadOperationConfigurations();
  }

  private loadOperationConfigurations(): void {

    this.configurationService.getAll(null)
      .subscribe(
        results => {
          this.operationConfigurations = results;
          this.progressBarService.hide();
        },
        error => {
          if (error.statusText === 'Unknown Error') {
            this.notificationService.openSnackBar('An error occurred, please try again later.');
          } else {
            this.notificationService.openSnackBar(error.error);
          }
          this.progressBarService.hide();
        }
      );
  }

}

HTML:

<!-- THIS WORKS -->
<ul>
  <li *ngFor="let c of operationConfigurations">
    {{ c.id }}
  </li>
</ul>

<!-- THIS DOES NOT WORK -->
<mat-table [dataSource]="operationConfigurations">

  <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
  <mat-row *matRowDef="let rowData; columns: columnsToDisplay"></mat-row>

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> # </mat-header-cell>
    <mat-cell *matCellDef="let column">
      {{column.id}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="columnName">
    <mat-header-cell *matHeaderCellDef> Column </mat-header-cell>
    <mat-cell *matCellDef="let column">
      {{column.columnName}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="hidden">
    <mat-header-cell *matHeaderCellDef> Visibility </mat-header-cell>
    <mat-cell *matCellDef="let column">
      {{column.hidden}}
    </mat-cell>
  </ng-container>

</mat-table>

Result:

enter image description here

Upvotes: 3

Views: 4252

Answers (2)

Learning
Learning

Reputation: 11

Using angular material 6 and running into the same issue. I am using = not : but still doesn't show data.

columns: Column[] = new CommentColumns().columns;
displayedColumns = [...this.columns.map(x => x.columnDef)];

However, data shows up when I change <mat-table> to <table mat-table> and <mat-row> to <tr mat-row>.

Upvotes: 1

umutesen
umutesen

Reputation: 2640

The culprit appears to be the way I declared columnsToDisplay

I changed the following line:

columnsToDisplay: ['id', 'columnName', 'hidden'];

to

columnsToDisplay = ['id', 'columnName', 'hidden'];

and the problem is solved.

Still learning typescript!

Upvotes: 18

Related Questions