在angular2中動態設置表格背景顏色

Question

我有一個動態表格，最後一列是可點擊的圖標。當我點擊圖標時，我會在下面顯示另一個表格，點擊圖標的行。 功能與我的代碼正常工作。但是，在點擊圖標後，這些行不會像CSS類'table-striped'那樣有替代顏色。 所有行在點擊後獲取相同的顏色。我能做些什麼使錶行的CSS爲「表條紋」

<table class="table table-hover table-striped" *ngIf="datas && datas.length"> 
    <thead> 
    <tr> 
     <th>a</th> 
     <th>b</th> 
     <th>&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 
     <ng-container *ngFor="let data of datas; let i = index"> 
     <tr> 
     <td>{{data.Something1}}</td> 
     <td>{{data.Something2}}</td> 
     <td> 
      <div (click)="onClick(i,data)"><span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': data.opendPanel , 'glyphicon-chevron-down': !data.opendPanel }"></span></div> 
     </td> 
     </tr> 
     <tr *ngIf="lists && lists.length" [hidden]="!data.opendPanel"> 
     <td colspan="13"> 
      <div [hidden]="!data.opendPanel"> 
      <br /><p *ngIf="lists && lists.length" >Stores</p> 
      <div> 
      <table class="table table-hover table-striped" *ngIf="lists && lists.length"> 
       <thead> 
        <tr> 
        <th>aa</th> 
        <th>bb</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr *ngFor="let list of lists"> 
         <td>{{aa.Name}}</td> 
         <td>{{bb.DCLocation}}</td> 
        </tr> 
       </tbody> 
      </table> 
      </div> 
      </div> 
     </td> 
     </tr> 
    </ng-container> 
    </tbody> 

Answer 1

您可以使用NgFor even或odd背景可變因素：

<ng-container *ngFor="let data of datas; let i = index; let odd=odd"> 
    <div [class.is-odd]="odd">...</div> 

剩下的只是CSS匹配類is-odd。

Answer 2

您可以使用索引根據偶數索引給出不同的顏色。 在你ngFro *ngFor="let list of lists" 添加此*ngFor="let list of lists"; let i = index;

，然後只用ngClass這樣

[ngClass]="{'className': i = odd(), 'className':i = even()}" 

您可以建立其返回奇數和偶數的功能。像這樣

function isEven(n) { 
    return n % 2 == 0; 
} 

function isOdd(n) { 
    return Math.abs(n % 2) == 1; 
}