在 angular material table 上设置最小行数

Question

我正在尝试显示具有最小高度的 angular 垫子 table。如果没有可用数据，我希望它只显示空行。

我看过这篇文章Angular Material Table set default number of rows

但是我不知道行数，因为显示器是响应式的。有人解决了吗？我还没有找到任何东西。

编辑似乎我对这个问题并不清楚，因为所有答案都不太合适。

我希望能够有一个大小为 div 或容器（可能是 table 元素本身）的响应。如果垂直更改页面大小，容器将垂直增长和收缩。可见的行数（无论是否有可用数据）也应根据可用的 table/container 高度

增加或减少

谢谢

Answer 1

如果数据为 1，则默认设置最少 5 行空白，然后通过检查存在的数据量 roews 将空白行数设置为 4

Answer 2

首先设置 mat-table 分页值，"pageSizeOptions" 中的第一个值是默认显示行数。

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

这样做，您将始终在每个页面上显示 5 行，正如我们在上面指定的那样。

这是一个代码示例，如果您的动态数据为空

，您可以如何生成 "dummy" 数据

    private getData() {
       const EMPTY_DATA: PeriodicElement[] = [
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null},
          {position: null, name: null, weight: null, symbol: null}
       ];

       this.dataSource.data = EMPTY_DATA;
       this.dataService.getAll().subscribe(data => {
          if (!data) return;
          this.dataSource.data = data;
    }

Answer 3

我会这样做：

ts

getData() {
  this.service.getData().subscribe(r => {
    const minLength = window.innerHeight / x; // x is your row height
    if (!r) {
      r = new Array(minLength);
    } else {
      if (r.length < minLength) {
        r.push(...new Array(minLength - r.length))
      }
    }
    this.dataSource.data = r;
  });
}

注意：要使用此功能，我建议您使用安全导航运算符：

https://angular.io/guide/template-syntax#safe-navigation-operator

如果您的 API 总是返回一个数组，并且没有数据 returns []，您可以删除第一个 if else。

getData() {
  this.service.getData().subscribe(r => {
    const minLength = window.innerHeight / x; // x is your row height
    if (r.length < minLength) {
      r.push(...new Array(minLength - r.length))
    }
    this.dataSource.data = r;
  });
}

在 angular material table 上设置最小行数

Set minimum number of rows on angular material table

angular-material

angular

mat-table