Мат-стол с расширяемыми строками, удаление скрытых рядов

Question

Я использую этот пример вложенных таблиц материалов для создания аналогичной таблицы в моем проекте. https://stackblitz.com/edit/angular-nested-mat-table?file=app%2Ftable-expandable-rows-example.ts

При таком подходе создается «скрытая» строка, если вы осмотрите страницу, то появятся строки с классом «example-element-row», за которыми следует строка с классом « пример-деталь-строка». «Пример-деталь-строка». скрытый.

Проблема, с которой я столкнулся, связана с моим корпоративным CSS классом таблицы, в котором добавляются дополнительные отступы + просмотр в виде полос (каждая четная строка имеет серый фон) - с этими CSS классами мой таблица выглядит ужасно, так как в любом случае отображается скрытая строка

Возможно ли преодолеть эту проблему? Я попытался добавить ngif с некоторым флагом в код ниже, но это нарушает возможность расширения строк, хотя таблица очень хорошо отрисовывается

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

Answer 1

Чтобы повторить поведение , вызванное вашей корпоративной CSS, я добавил следующий блок CSS к ссылке stackblitz, которой вы поделились :

tr td {
  padding:5px 0;
}

это типичное превышение правил css для веб-сайтов ... до разрешение , нам просто нужно переопределить это с помощью более подробного css Правило:

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

Завершено здесь работает стек стека