我正在尝试显示一个具有最小高度的角垫表。如果没有可用数据，我希望它只显示空行。
我看过这篇文章Angular Material Table set default number of rows
但我不知道显示响应的行数。有人解决了这个问题吗？我还没有找到任何东西。
编辑 似乎我对这个问题并不清楚，因为所有答案都不太合适。
我希望能够有一个响应大小的 div 或容器（可能是表格元素本身）。如果页面大小垂直更改，容器将垂直增长和收缩。可见的行数（无论是否有可用的数据）也应该根据可用的表/容器高度增加或减少
谢谢
【问题讨论】：
标签： angular angular-material mat-table
如果数据为 1，则默认设置最少 5 行空白，然后通过检查存在的数据行数将空白行数设置为 4
【讨论】：
首先设置 mat-table 分页值，“pageSizeOptions”中的第一个值是您的默认显示行数。
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
这样做，您将始终在每页上显示 5 行，如我们上面指定的那样。
这是一个代码示例，如果您的动态数据为空，您将如何生成“虚拟”数据
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;
}
【讨论】：
我会这样做：
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 总是返回一个数组，并且如果没有数据返回 []，你可以删除第一个 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;
});
}
【讨论】：