具有可扩展行的垫表，删除隐藏行

Question

我正在使用这个嵌套材料表的 stackblitz 示例在我的项目中创建类似的表。 https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts

这种方法会创建一个“隐藏”行，如果您要检查该页面，则会有“example-element-row”类的行，然后是“example-detail-row”类的行。 “示例详细信息行”。是隐藏的。

我遇到的问题与我的公司 CSS 表格类有关，它添加了额外的填充 + 条状视图（每一行都有灰色背景） - 使用这个 CSS 类，我的表格看起来很糟糕，因为无论如何都会显示隐藏行

是否有可能克服这个问题？我尝试在下面的代码中添加带有一些标志的 ngif，但是即使表格渲染得很好，它也会破坏可扩展行功能

<tr *ngIf="flag" mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

Answer 1

为了复制由贵公司 CSS 引起的行为，我将以下 CSS 块添加到 stackblitz link which you shared：

tr td {
  padding:5px 0;
}

这是典型的网站通用 css 规则...解决，我们只需要通过更详细的 css 规则来覆盖它：

.mat-row.example-detail-row td{
/* comment this to see the problem behavior */
  padding:0;
}

完成working stackblitz here