如何將奇偶行CSS應用於動態加載的組件？

Question

我正在研究解決方案。

我已經在特定類別的要素上使用：Even，：odd選擇器應用了偶數/奇數行css

我有兩個表，第一個表最初是通過擴展按鈕加載數據的，單擊后我會在該特定行之后加載動態表

我在第一張桌子上的CSS代碼工作正常但第二

這是我從google chrome web inspector的inspect元素功能復制的html

<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>標記而導致發生此問題。 最好在生成動態組件的地方使用“ ng-container”來生成動態組件。

您沒有共享完整的代碼，因此很難說出確切的解決方法。 如果可以在stackblitz中復制問題，則更容易給出確切的解決方法。

Answer 2

添加dynamic-component如下所示：

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

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