Question

我有一个动态表，最后一列是可点击的图标。当我点击图标时，我会在点击图标的行下方显示另一个表格。我的代码功能正常。但是，单击图标后，行没有像css类'table-striped'那样的替代颜色。点击后所有行都获得相同的颜色。我该怎么做才能使表行的css成为'table-striped'

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

其余的只是与is-odd类匹配的CSS。

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

在angular2中动态设置表格背景颜色

2 个答案: