angular2에서 표 배경색을 동적으로 설정하십시오.

Question

마지막 열을 클릭 가능한 아이콘으로 갖는 동적 테이블이 있습니다. 아이콘을 클릭하면 클릭 한 아이콘 행 아래에 다른 표가 표시됩니다. 기능이 제 코드와 잘 작동합니다. 그러나 아이콘을 클릭하면 행에 CSS 클래스 '테이블 스트라이프'와 같은 대체 색상이 없습니다. 모든 행은 클릭 후 동일한 색상을 얻습니다. 나머지는 단지 CSS 매칭

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

입니다

: 나는 '테이블 스트라이프'

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

당신은 NgFor even 또는 odd 컨텍스트를 사용할 수 있습니다

Answer 1

가 varibles과 같이 테이블 행의 CSS를 만들기 위해 무엇을 할 수 is-odd 클래스

Answer 2

인덱스를 사용하여 홀수 짝수 인덱스를 기반으로 다른 색상을 지정할 수 있습니다. 당신에 은 *ngFor="let list of lists" 이 *ngFor="let list of lists"; let i = index;

을 추가하고 당신이 홀수 반환 기능을 내장 할 수 있습니다이

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

같은 ngClass를 사용 ngFro. like

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

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