0

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

这是我的打字稿：

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

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

谢谢你的帮助。

错误图像

4

2 回答 2

1

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

更新：您需要让您的let分配与您的对象参考相匹配。因此，<mat-cell *matCellDef="let element"> {{atentions.nombre}} </mat-cell>您应该更改element为atentions.

于 2018-03-01T13:10:58.560 回答
0

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

<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>
于 2018-02-28T20:37:41.767 回答