Mat-table with expandable rows, 删除隐藏行

Question

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

这种方法会创建一个 "hidden" 行，如果您要检查页面，将会有 class "example-element-row" 的行，然后是 class [=24 的行=]. "example-detail-row"。是隐藏的

我遇到的问题与我的公司有关 CSS table class 它添加了额外的填充 + 像视图一样的条带（每行偶数都有灰色背景）- 这个 CSS classes 我的 table 看起来很糟糕，因为无论如何都会显示隐藏行

这个问题可以解决吗？我尝试将带有一些标志的 ngif 添加到下面的代码中，但它破坏了可扩展行功能，即使 table 呈现得很好

<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 规则...为了 resolve，我们只需要覆盖这是通过更详细的 css 规则：

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

Mat-table with expandable rows, remove hidden rows