2

我正在编写一个 Angular 应用程序并使用 mat-list-item 将行添加到我的数据网格中。具有父行的网格将在单击时展开并显示子行。默认情况下，所有父行都是折叠的。我让所有子行都使用备用颜色，但不是父行。它们都是相同的颜色，我需要从白色和灰色中交替。我尝试了一些方法，但它在 style.css 中不起作用。我可以更改所有父行的颜色，但不能让它们像子行一样交替。

我的 html/angular 代码如下

<div class="ng-container" *ngFor="let displayName of myData.displayNames">
    <mat-list-item fxLayoutAlign="start" (click)="onRowClicked(displayName, myData)" class="metric-list-item"> // this does not alternate
            <strong><span>{{displayName.name}}</span></strong>  
        </mat-list-item>
        <div class="ng-container" *ngIf="showChildRows(displayName)">
            <mat-list class="wf-list">  //this works and alternate colors
                    <mat-list-item fxLayoutAlign="start" *ngFor="let myLabel of myData.subDisplayNames"> 
                            <span class="indent">{{myLabel}}</span>
                        </mat-list-item>
                </mat-list> 
        </div>
</div>

子行在角度组件 css 文件中与以下内容一起使用

.mat-list >  .mat-list-item:nth-child(2n+1){
    background-color:white;
  }
  .mat-list >  .mat-list-item:nth-child(2n){
    background-color:rgb(230, 228, 228);
  }

但是我被我在全局 style.css 中定义的父行难住了

  .metric-list-item:nth-child(2n){
    background-color: rgb(207, 203, 203);
}
.metric-list-item:nth-child(2n+1){
    background-color:rgb(230, 228, 228);
  }

它只会改变 2n+1 的颜色

我什至尝试了以下

.metric-list-item:nth-child(even){
    background-color: rgb(207, 203, 203);
}
.metric-list-item:nth-child(odd){
    background-color:rgb(185, 55, 55);
}

同样，将所有父行更改为奇数。

如何让父行颜色交替？任何帮助表示赞赏。谢谢

顺便说一句，我已经阅读了其他文章。我使用了 2n 和 2n+1，奇数和偶数，但它们不适用于 mat-list-item。奇数正在改变颜色，但不是偶数。其他文章使用 div 标签。我正在谷歌搜索，但没有找到可行的方法。不知道为什么偶数不起作用。

4

0 回答 0