该表不以 Angular 显示信息

Question

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

这是我的打字稿：

表.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：

塔布拉.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> 

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

感谢您的帮助。

错误图像

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>