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

Я использую этот пример 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>

angular css angular-material angular-material-table
person Dmitriy Ashmarin    schedule 20.01.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы воспроизвести поведение, вызванное вашим корпоративным 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;
}

полный рабочий stackblitz здесь

person Akber Iqbal    schedule 21.01.2020
comment
Это так просто и работает, я потратил много часов, пробуя разные комбинации в файле CSS компонента, но они не работали. Большое спасибо! Еще один вопрос, можно ли с помощью этого решения применить серый / белый фон к нечетным / четным строкам? - person Dmitriy Ashmarin; 22.01.2020
comment
Спасибо за добрые слова ... для css проблема в том, что каждая вторая строка должна быть скрыта, поэтому мы не можем использовать :nth-child(odd) или _2 _..., но мы можем использовать следующее: `tr: nth- ребенок (4n + 1) {фон: светло-зеленый; } tr: nth-child (4n + 3) {фон: голубой; } tr.mat-header-row {фон: светло-розовый; } `- stackblitz в моем ответе также обновлен этим - person Akber Iqbal; 23.01.2020