是否在angular2模板语法

时间:2017-05-02 13:26:28

标签: angular angular2-template

Angular2..为什么以及如何?

如何在angular2

中执行以下if条件
    <td *ngFor="let val of rows;let j=index">
            IF J==0
                 <label>{{val}}</label>
            ELSE:
               <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label>

</td>

3 个答案:

答案 0 :(得分:25)

您可以使用*ngIf结构指令和if-else语法来实现此结果。

<label *ngIf="j === 0; else elseBlock">{{val}}</label>
<ng-template #elseBlock>
    <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}</label>
</ng-template>

另一种选择是使用两个*ngIf块并反转条件,如下所示:

<label *ngIf="j === 0">{{val}}</label>
<label *ngIf="j !== 0" style="color:#000000;font-size:12px;padding-top:5px">{{val}}</label>

答案 1 :(得分:9)

如果您计划升级到Angular 4,则可以使用包含此版本的新if / else模板。例如:

<div *ngIf="someCondition; else falsyTemplate">
  <h1>Condition Passed!</h1>
</div>

<ng-template #falsyTemplate>
  <h1>Condition Failed!</h1>
</ng-template>

检查以下有用链接:

我个人建议升级到Angular 4。

答案 2 :(得分:0)

您可以使用<ng-container>元素在Angular 2中执行此操作。在您的示例中,它应该是这样的:

<td *ngFor="let val of rows;let j=index">
    <ng-container *ngIf="J==0">
        <label>{{val}}</label>
    </ng-container>
    <ng-container *ngIf="J!=0">
        <label style="color:#000000;font-size:12px;padding-top: 5px">{{val}}
</label>
    </ng-container>
</td>

您可以在文档中找到更多信息:https://angular.io/guide/structural-directives#ng-container-to-the-rescue