Question

我想向数据表显示数据表单服务。我可以从控制台内的USER_DATA查看元素，但不能在html中查看。

export class DashboardComponent  {
  displayedColumns = ['name', 'email', 'phone', 'company'];
  dataSource: MatTableDataSource<User[]>; 
  constructor(private userService: CustomService) { 
    const USER_DATA: Array<User[]> = [];

  this.userService.getUser().subscribe((user) => {
           this.USER_DATA = user;
  });

   this.dataSource = new MatTableDataSource(USER_DATA);
}

数据表代码：

  <mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
    </ng-container>
    <!-- Progress Column -->
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
          <mat-cell *matCellDef="let user"> {{user.email}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="phone">
            <mat-header-cell    *matHeaderCellDef mat-sort-header>Phone</mat- 
                header-cell>
            <mat-cell *matCellDef="let user"> {{user.phone}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="company">
              <mat-header-cell *matHeaderCellDef mat-sort-header>Company</mat- 
               header-cell>
              <mat-cell *matCellDef="let user"> {{user.company.name}}</mat-cell>
            </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;">
        </mat-row>
      </mat-table>

Answer 1

假设users是User[]，请尝试

export class DashboardComponent  {
  displayedColumns = ['name', 'email', 'phone', 'company'];
  dataSource=new MatTableDataSource<User>();
  constructor(private userService: CustomService) { 
      this.userService.getUser().subscribe(users => this.dataSource.data=users);
   }
}

dataSource在Mat-Cell中不显示属性值

1 个答案: