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并将其包含在构造函数中（私有ref：ChangeDetectorRef）

希望这会有所帮助。

角度材料数据表不显示行

1 个答案: