как смешать синтаксис выражения шаблона с кодом - PullRequest
Новая
       11

как смешать синтаксис выражения шаблона с кодом

0 голосов
/ 01 октября 2018

Мой первый проект 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>

1 Ответ

0 голосов
/ 01 октября 2018

Я создал 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>
...