该表未显示角度信息

Question

我有一个问题，信息显示在控制台中，但当我尝试在表中显示信息时，列显示但没有看到对象。我不知道为什么！

这是我的打字稿：

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

这是我的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> 

有人知道我的错误是什么吗？

谢谢你的帮助。

Error Image

Answer 1

在您的错误图像中，Nombre是大写的。将选择器更改为{{atentions.Nombre}}，或将数据集更改为全小写键。

更新：您需要让let赋值与您的对象引用相匹配。所以，如果你有<mat-cell *matCellDef="let element"> {{atentions.nombre}} </mat-cell>，你应该将element改为atentions。

Answer 2

你试过原来的角桌吗？就像是：

<table>
  <tr> 
    <th>Nombre</th>
    <th>Apellido</th>
  </tr>
  <tr ng-repeat="atention in atentions">
    <td>{{ atention.nombre }}</td>
    <td>{{ atention.apellido }}</td>
  </tr>
</table>