Question

我在angular2中使用了ngFor动态生成的表格，我希望将颜色与偶数行的颜色区别开来。

{{1}}

我想交替为每一行着色，但此代码以相同的颜色打印所有行。我已经设置了一个CSS文件，使用

相应地为每一行着色

{{1}}

此代码。

Answer 1

tr:nth-child(odd)将匹配作为奇数子项的表行元素。在您的标记中，每个tr确实是其父div的奇数子（第一个）。

您需要更改标记或将css样式应用于其父div。

<table>
  <tbody>
    <ng-container *ngIf="AreThereMyOldMessages">
      <tr *ngFor="let oldm of MyOldMessages;let i of MyOldMessages.length">
      </tr>
    </ng-container>
    <ng-container *ngIf="AreThereMyNewMessages">
      <tr *ngFor="let message of MyNewMessages;let i of MyNewMessages.length">
      </tr>
    </ng-container>
  </tbody>
</table>

Answer 2

尝试以下CSS：

table tr:nth-child(even){
          background-color:red;
          }

table tr:nth-child(odd){
          background-color:black;
          }

在angular2中使用CSS的nth-child和ngFor

2 个答案: