the table doesn't show the information in angular

Question

I have a problem, the information displays in console but when I try to display the information in the table, the columns show but doesn't see the object. I don't know why!

Here's my Typescript:

table.ts

constructor(public studentAtentionService: StudentAtentionService) { }

  atentions: StudentService[];


  displayedColumns = ['nombre', 'apellido', 'correo', 'fecha', 'servicio', 'estado'];
  dataSource = new MatTableDataSource();

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

  ngOnInit() {
    this.studentAtentionService.getService()
      .subscribe(atentions => {
        this.atentions = atentions;
        console.log(atentions)
        this.dataSource = new MatTableDataSource(this.atentions);
      });
  }

and here is my HTML:

tabla.html

<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">

    <!-- Nombre Column -->

    <ng-container matColumnDef="nombre">
      <mat-header-cell *matHeaderCellDef> Nombre </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{atentions.nombre}} </mat-cell>
    </ng-container> 

    <!-- Apellido Column -->

    <ng-container matColumnDef="apellido">
      <mat-header-cell *matHeaderCellDef> Apellido </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{atentions.apellido}} </mat-cell>
    </ng-container>

    <!-- Correo Column -->

    <ng-container matColumnDef="correo">
      <mat-header-cell *matHeaderCellDef> Correo </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{atentions.correo}} </mat-cell>
    </ng-container>

    <!-- Fecha Column -->
    <ng-container matColumnDef="fecha">
      <mat-header-cell *matHeaderCellDef> Fecha </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{atentions.fecha}} </mat-cell>
    </ng-container>

    <!-- Servicio Column -->
    <ng-container matColumnDef="servicio">
      <mat-header-cell *matHeaderCellDef> Servicio </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{atentions.servicio}} </mat-cell>
    </ng-container>

    <!-- Estado Column -->
    <ng-container matColumnDef="estado">
      <mat-header-cell *matHeaderCellDef> Estado </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{atentions.estado}} </mat-cell>
    </ng-container>

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

Does someone know what is my error?

Thanks for your help.

Error Image

Answer 1

In your error image Nombre is capitalized. Change your selectors to {{atentions.Nombre}}, or change your dataset to have all-lowercase keys.

Update: you need to have your let assignment match your object reference. So where you have <mat-cell *matCellDef="let element"> {{atentions.nombre}} </mat-cell> you should change element to atentions.