Question

我正在尝试显示最小高度的角垫桌子。如果没有可用数据，我希望它仅显示空白行。

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

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

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

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

谢谢

Answer 1

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

Answer 2

首先设置垫子表的分页值，“ pageSizeOptions”中的第一个值是您默认的显示行数。

    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;
    }

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

这是一个代码示例，如果动态数据为空，您将如何生成“虚拟”数据

+ scale_fill_grey(start=0.8, end=0.2)

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总是返回数组，并且如果没有数据返回[]，则可以删除第一个（如果没有）。

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;
  });
}

设置角形材料表上的最小行数

3 个答案: