角材料数据表不显示一行

Question

我正在创建一个示例数据列表并在此处实现数据表Material Data Table，我使用的分页有一个数字，但显示行是空的。我不知道为什么行不显示。

这是我的代码。

Component.html

<div class="row mt-5 mat-elevation-z8">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
    <table mat-table [dataSource]="dataSource" matSort>
        <!-- ID Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
          <td mat-cell *matCellDef="let row"> {{row.id}} </td>
        </ng-container>

        <!-- Generated Number Column -->
        <ng-container matColumnDef="generated_no">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Generated Number </th>
          <td mat-cell *matCellDef="let row"> {{row.generated_no}} </td>
        </ng-container>

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

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;">
        </tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Component.ts

export class CouponComponent implements OnInit {
  coupons: Coupon[] = [];

  displayedColumns = ['id', 'generated_no', 'name'];
  dataSource: MatTableDataSource<Coupon>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private couponService: CouponService,
    private formBuilder: FormBuilder
  ) { 
    this.dataSource = new MatTableDataSource(this.coupons)
  }

  ngOnInit() {
    this.getCoupons();
  }

  getCoupons(): void {
    this.couponService.getCoupons()
    .subscribe(coupons => this.dataSource.data = coupons);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}

并且输出只是这个分页有一个数字但表格没有显示行。

我是不是忘了包括什么东西？？

编辑：

过滤器也在工作，如果我在过滤器中输入一些内容，分页中的数字正在改变，所以这意味着我的dataSource 不为空。

这是HTML的内容

另一个编辑

查看此示例 Data Table 后，我发现它正在使用 6.0.0 依赖项所以我将 npm update 运行到我的项目目录以更新我的依赖项，这里看起来喜欢。

package.json

但在运行ng serve 时遇到此错误。

Answer 1

我认为我们应该在数据源初始化后推动角度变化检测周期。

getCoupons(): void {
  this.couponService.getCoupons()
  .subscribe(coupons => {
    this.dataSource.data = coupons;
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.ref.markForCheck();
  });
}

导入 ChangeDetectorRef 并将其包含在您的构造函数中（私有参考：ChangeDetectorRef）

希望这会有所帮助。