Question

我的第一个Angular 2项目。简单滚动总计在桌子上。这里有人建议使用{{calcRollingtotal（..）}}之类的方法执行此操作。但是随着我对Angular的深入了解，我意识到我可以使用模板表达，但是在语法上却很挣扎。请帮忙。到目前为止，我在下面但在下面不起作用。尝试了各种组合。.

<table border="1">
   <tr *ngFor="let sales of salesDataArray;let i = index">
     <td> {{( i > 0) ? 
                       salesDataArray[i-1].fiscalPeriod + 
                       salesDataArray[i].fiscalPeriod} 
                     : 
                       salesDataArray[i].fiscalPeriod}
     </td>
    </tr>
</table>

Answer 1

我创建了一个stackblitz来可视化答案。

为避免混淆并提高代码的可读性，最简单的解决方案是将两个单独的元素与*ngIf结合使用。

<table border="1">
  <tr *ngFor="let item of salesDataArray; let i = index">
    <td>
      <ng-container *ngIf="i > 0">
        {{salesDataArray[i-1].fiscalPeriod + item.fiscalPeriod}}
      </ng-container>
      <ng-container *ngIf="i === 0">
        {{item.fiscalPeriod}}
      </ng-container>
    </td>
  </tr>
</table>

使用ng-container可确保该元素未在DOM中标记，以便代码生成类似<td>5</td>的内容。

请注意，在这种情况下，item等效于salesDataArray[i]。

更优雅的解决方案（stackblitz）：

<table border="1">
  <tr *ngFor="let item of salesDataArray; let i = index">
    <td>
      {{( i > 0) ? (salesDataArray[i-1].fiscalPeriod + salesDataArray[i].fiscalPeriod) : (salesDataArray[i].fiscalPeriod)}}
    </td>
  </tr>
</table>

如何将模板表达式语法与代码混合

1 个答案: