Как применить четно-нечетные строки CSS для динамически загружаемых компонентов?

Question

Я работаю над решением.

Я применил четную / нечетную строку css, используя: Четный,: нечетный селектор для определенного класса элементов

У меня две таблицы, первая из которых изначально загруженаданные с кнопкой расширения, по щелчку которых я загружаю динамическую таблицу после этой конкретной строки

мой код CSS в первой таблице работает нормально, но не для второй

Вот HTML, который я скопировал из проверкифункциональность элемента веб-инспектора Google Chrome

<div class="report-table-container" style="margin-top: 30px;">
<div class="row report-row">
    <div class="col-4" style="padding-left: 5px;">
        <button class="btn btn-sm">-</button>USA
    </div>
    <div class="col-1">8.26M</div>
    <div class="col-1">534.00</div>
    <div class="col-1">2.83K</div>
    <div class="col-1">317.81M</div>
    <div class="col-1">8.26M</div>
    <div class="col-1">695.00</div>
</div>
    // second level table 
    <dynamic-component>
        <div class="row report-row">
                <div class="col-4" ng-reflect-ng-style="[object Object]" style="padding-left: 40px;">iOS</div>
                <div class="col-1">5.15M</div>
                <div class="col-1">392.00</div>
                <div class="col-1">2.15K</div>
                <div class="col-1">183.98M</div>
                <div class="col-1">5.15M</div>
                <div class="col-1">490.00</div>
        </div>
        <div class="row report-row">
                <div class="col-4" ng-reflect-ng-style="[object Object]" style="padding-left: 40px;">Android</div>
                <div class="col-1">3.11M</div>
                <div class="col-1">142.00</div>
                <div class="col-1">683.35</div>
                <div class="col-1">133.82M</div>
                <div class="col-1">3.11M</div>
                <div class="col-1">205.00</div>
        </div>
    </dynamic-component>

CSS-код для применения нечетных / четных стилей ко всем строкам, содержащим класс ".report-row"

div.report-row:nth-child(odd) {
    background-color: #F5F5F5;
}
div.report-row:nth-child(even) {
  background-color: #ffffff;
}

Проблема возникает из-за тега динамического компонента, если я удаляю, что он работает нормально.

Вот скриншоты

Пожалуйста, помогите

Пожалуйста, помогите

Answer 1

Добавить dynamic-component как это:

 dynamic-component div.report-row:nth-child(odd) {
    background-color: #F5F5F5;
}

dynamic-component div.report-row:nth-child(even) {
  background-color: #ffffff;
}

Answer 2

Проблема возникает из-за тега <dynamic-component>.Лучше генерировать динамический компонент с помощью `ng-container ', где вы генерируете динамический компонент.

Вы не передали полный код, поэтому сложно сказать точное исправление.Если вы можете повторить вашу проблему в stackblitz, было бы легче дать точное решение.