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

Question

我的第一个 Angular 2 项目。 table 上的简单滚动总数。这里有人建议使用像 {{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>

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

how to mix template expression syntax with code

angular

angularjs-directive

angular2-directives

angular-template