Question

我正在研究解决方案。

我在特定类别的要素上使用：Even，：odd选择器应用了偶数/奇数行CSS

我有两个表，第一个表最初是使用扩展按钮加载数据的，单击时我会在该特定行之后加载动态表

我在第一张桌子上的css代码工作正常，但第二张却无法正常工作

这是我从Google Chrome浏览器检查器的检查元素功能中复制的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>

用于在所有包含“ .report-row”类的行上应用奇/偶样式的CSS代码

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;
}

如何将奇偶行CSS应用于动态加载的组件？

2 个答案: