填充数据源时,角材料表未显示值

时间:2020-05-25 20:08:02

标签: angular angular-material

我对角材料库提供的表格有疑问。

我正在尝试使用从服务中获取的数据填充它。我可以看到填充了用于表的源,但是html中未显示任何内容。这是我到目前为止的代码:

  public displayedColumns: string[] = ['name', 'saldo', 'totalstripes'];
  public dataSource = new MatTableDataSource;


  constructor(
    private adminservice : AdminService
  ) { 
    this.adminservice.getAllStripesFromAllUsers().subscribe(data => {
      this.dataSource.data = data;
    })

  }

.ts文件,在构造函数中具有数据源设置

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

  <!-- Name Column -->
   <ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Naam </mat-header-cell>
     <mat-cell *matCellDef="let row"> {{row.user_forname}} </mat-cell>
   </ng-container>

  <!-- amount Column -->
    <ng-container matColumnDef="saldo">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Saldo </mat-header-cell>
     <mat-cell *matCellDef="let row"> {{row.user_saldo}} </mat-cell>
    </ng-container>

    <!-- total stripes Column -->
    <ng-container matColumnDef="totalstripes">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Totaal aantal strepen</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.totalstripes}}</mat-cell>
    </ng-container>

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

表格的html代码。

datasource that is filled with data

希望有人有更多的知识,那么我可以帮助我。

p.s这是我第一次使用stackoverflow,我希望我已经很清楚了,并且这篇帖子是根据指导原则进行的。 :)

0 个答案:

没有答案