CODEWITHSUNDEEP
javascriptangularangular-material
Hamza Haddad
Hamza Haddad

Reputation: 1556

Mat-table does not print data in Angular 5

I would use mat-table in my project

In my component file I use observable to catch data from DB and print them in my data table.

I tried to follow the official tutorial but nothing is printed on screen and I don't get error

export class ListeProjetsComponent implements OnInit {

  constructor(private ajoutProj: AjoutprojService) { }
  nouveauProjet: NouveauProjet[];
  ngOnInit(){
    this.getAllProj();
  }
  displayedColumns = ['name'];
  dataSource = new MatTableDataSource<NouveauProjet>(this.nouveauProjet);

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  getAllProj() {
    this.ajoutProj.getAllProj().subscribe(
      response => {
      this.nouveauProjet = response; console.log(this.nouveauProjet) // data is printed in the browser console. but not on screen
      },
      error => console.log(error)
    );
  }
}

Html file

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.nomProj}} </mat-cell>
    </ng-container>



    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

App screenshot

Upvotes: 0

Views: 3641

Answers (1)

Michael Doye
Michael Doye

Reputation: 8171

This might be happening because you initialize the table with an empty data set:

dataSource = new MatTableDataSource<NouveauProjet>(this.nouveauProjet);

At this point, this.nouveauProjet presumably does not contain any data;

Try re initializing the table data source when you get the data from your service:

  getAllProj() {
    this.ajoutProj.getAllProj().subscribe(
      response => {
        // set dataSource here
        this.dataSource = new MatTableDataSource<NouveauProjet>(response);
      },
      error => console.log(error)
    );
  }

Upvotes: 3

Related Questions