Angular可折叠表格行如何通过变量设置visibility CSS属性值

Angular 不支持直接在原生静态style属性里插入变量调用，你可以用以下两种官方支持的绑定方式实现动态控制visibility属性：

方法1：单样式属性绑定（更简洁） #

直接绑定单个visibility样式属性，代码如下：

<tr id="para" mat-row *matRowDef="let row; columns: ['expandedDetail']"
    style="height: 0px;"
    [style.visibility]="calcRowVisibility(row)"
    [hidden]="expandedElement === undefined || expandedElement === null">
</tr>

方法2：ngStyle 多样式绑定（你已实现的方案） #

如果需要同时控制多个样式，可以用[ngStyle]语法，也就是你已经用到的写法：

<tr id="para" mat-row *matRowDef="let row; columns: ['expandedDetail']"
    style="height: 0px;"
    [ngStyle]="{'visibility': calcRowVisibility(row)}"
    [hidden]="expandedElement === undefined || expandedElement === null">
</tr>

你只需要在组件的ts文件中定义calcRowVisibility方法，自定义空行判断逻辑，返回对应的属性值即可：

// 对外暴露的样式值计算方法
calcRowVisibility(row: any): string {
  // 空行返回collapse，非空行返回visible
  return this.checkRowEmpty(row) ? 'collapse' : 'visible';
}

// 自定义空行判断逻辑，可根据你的业务需求修改
private checkRowEmpty(row: any): boolean {
  // 示例逻辑：判断行的展开详情内容是否为空
  return !row.expandDetail || row.expandDetail.length === 0;
}

补充说明 #

之前设置行高为0依旧无法隐藏，是因为Angular Material的mat-table行默认带有padding、border等内置样式，即使高度设为0，这些盒模型属性依然会占据空间。visibility: collapse是专门针对表格元素的属性，开启后整行包括边框、内边距都会完全隐藏，也不会占据页面布局空间，刚好适配你的需求。

内容的提问来源于stack exchange，提问作者dorcsi