angular4 动态绑定class

问题场景：

222.png

请问一下 我想在1的位置添加一个和下标关联的class 应该怎么操作？

有效的方案

333.png

444.png

特别说明:

带中括号后面就不要带大括号 反之就要带

虚拟dom节点上不能帮属性 只能绑逻辑

ng-container标签下层加一个div 把class放那里面

{}里面的东西会去运算的

另外死的东西用da括号括起来

DEMO展示

<ng-container *ngIf="v.commissions">
                        <tr *ngFor="let v1 of v.commissions;let num=index">
                            <td>{{v1.category_name}}</td>
                            <td>{{v1.total_number}}</td>
                            <td>{{v1.total_commissions}}</td>
                            <ng-container *ngIf="TOP5 === true">
                                <td style="position: relative;" class="{{'top5-'+v1.topId}}">
                                    <div *ngFor="let v2 of v1.top5" >{{v2.name}}</div>
                                    <div *ngIf="v1.top5.length >4" class="ori-text" style="position: absolute;right: 10px;top: 2px" (click)="showMore(v1.topId);">查看更多</div>
                                </td>
                                <td class="{{'top5-'+v1.topId}}"><div *ngFor="let v2 of v1.top5">{{v2.count}}</div></td>
                                <td class="{{'top5-'+v1.topId}}"><div *ngFor="let v2 of v1.top5">{{v2.amount}}</div></td>
                                <td class="{{'top5-'+v1.topId}}">
                                    <a href="javascript:void(0)"
                                       style="display: block"
                                       *ngFor="let v2 of v1.top5"
                                       [routerLink]="['/order/detail', v2.order_id]"
                                       class="ori-text">查看订单</a>
                                </td>
                            </ng-container>
                            <ng-container *ngIf="TOP5 === false">
                                <td class="{{'top6-'+v1.topId}}"><div *ngFor="let v2 of v1.topAll">{{v2.name}}</div></td>
                                <td class="{{'top6-'+v1.topId}}"><div *ngFor="let v2 of v1.topAll">{{v2.count}}</div></td>
                                <td class="{{'top6-'+v1.topId}}"><div *ngFor="let v2 of v1.topAll">{{v2.amount}}</div></td>
                                <td class="{{'top6-'+v1.topId}}">
                                    <a href="javascript:void(0)"
                                       style="display: block"
                                       *ngFor="let v2 of v1.topAll"
                                       [routerLink]="['/order/detail', v2.order_id]"
                                       class="ori-text">查看订单</a>
                                </td>
                            </ng-container>
                        </tr>
                    </ng-container>

<td>{{v1.category_name}}</td>
                            <td>{{v1.total_number}}</td>
                            <td class="ori-text">{{v1.total_commissions.toFixed(2)}}</td>
                            <td style="position: relative;" [ngStyle]="{'display': tempId === v1.topId ? 'none' : '' }">
                                <div *ngFor="let v2 of v1.top5" >{{v2.name}}</div>
                                <div *ngIf="v1.top5.length >4" class="ori-text" style="position: absolute;right: 10px;top: 2px" (click)="showMore(v1.topId);">查看更多</div>
                            </td>
                            <td [ngStyle]="{'display': tempId === v1.topId ? 'none' : '' }"><div *ngFor="let v2 of v1.top5">{{v2.count}}</div></td>
                            <td  [ngStyle]="{'display': tempId === v1.topId ? 'none' : '' }"><div *ngFor="let v2 of v1.top5">{{v2.amount}}</div></td>
                            <td  [ngStyle]="{'display': tempId === v1.topId ? 'none' : '' }">
                                <a href="javascript:void(0)"
                                   style="display: block"
                                   *ngFor="let v2 of v1.top5"
                                   [routerLink]="['/order/detail', v2.order_id]"
                                   class="ori-text">查看订单</a>
                            </td>

                            <td [ngStyle]="{'display': tempId === v1.topId ? '' : 'none' }"><div *ngFor="let v2 of v1.topAll">{{v2.name}}</div></td>
                            <td [ngStyle]="{'display': tempId === v1.topId ? '' : 'none' }"><div *ngFor="let v2 of v1.topAll">{{v2.count}}</div></td>
                            <td [ngStyle]="{'display': tempId === v1.topId ? '' : 'none' }"><div *ngFor="let v2 of v1.topAll">{{v2.amount}}</div></td>
                            <td [ngStyle]="{'display': tempId === v1.topId ? '' : 'none' }">
                                <a href="javascript:void(0)"
                                   style="display: block"
                                   *ngFor="let v2 of v1.topAll"
                                   [routerLink]="['/order/detail', v2.order_id]"
                                   class="ori-text">查看订单</a>
                            </td>