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引起的行为 ，我在stackblitz link which you shared中添加了以下CSS块：

tr td {
  padding:5px 0;
}

这是网站的典型的总体CSS规则...要解析，我们只需要通过更详细的CSS规则来覆盖它即可：

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