Angualr2 Przeliczanie sumy elementów na fakturze

0

W Angularze 2 wyświetlam poszczególne faktury z "filteredInvoices" oraz elementy tych faktur "invoice.invoiceItems". Chciałbym jednocześnie "na żywo" w miejscu SUMA NETTO wyświetlić sumę wartości netto poszczególnych elementów faktury invoice.invoiceItems.netValue dla każdej faktury z osobna. W jaki sposób powinno się taki coś robić? Dodać kolejną właściwość do modelu i przy pobieraniu danych z API przeliczać tą sumę czy może jest jakiś prostszy sposób w locie?

<!-- Invoice -->
      <template ngFor let-invoice [ngForOf]="filteredInvoices">
        <table class="table table-hover service-item-set-rows-marker">
          <thead class="thead-inverse">
            <tr>
              <th class="text-left">FV z dnia: {{ invoice.invoiceDate | date:'shortDate' }} </th>
              <th class="text-right customer-code-width"><strong>{{ invoice.customer.customerCode }}</strong></th>
              <th colspan="3"></th>
              <th class="text-right">
                <strong> SUMA NETTO</strong>
              </th>
              <th colspan="3"></th>
              <th class="text-right">
                <strong>SUMA BRUTTO</strong>
              </th>
            </tr>
          </thead>

          <tbody>
            
            <!-- Invoice Items -->
            <tr *ngFor="let invoiceItem of invoice.invoiceItems">
                <td></td>
                <td class="text-right">{{ invoiceItem.remoteSystemServiceCode }}</td>
                <td colspan="2">{{invoiceItem.description}} <span class="glyphicon glyphicon-info-sign notes-indicator" title="{{ invoiceItem.notes }}" *ngIf="invoiceItem.notes"></span></td>
                <td class="text-right value-width"><strong>{{invoiceItem.quantity}} {{invoiceItem.units}}</strong></td>
                <td class="text-center sign-width"> x </td>
                <td class="text-right value-width"><strong>{{invoiceItem.netUnitPrice | currency:'PLN':false:'1.2-2'}}</strong></td>
                <td class="text-center sign-width"> + </td>
                <td class="text-right percent-width"><strong>{{invoiceItem.vatRate | number:'1.0-2'}} %</strong></td>
                <td class="text-center sign-width"> = </td>
                <td class="text-right value-width"><strong>{{invoiceItem.grossValueAdded | currency:'PLN':false:'1.2-2'}}</strong></td>
                <td></td>
            </tr>
          </tbody>
        </table>
      </template>
0
<!-- Invoice -->
      <template ngFor let-invoice [ngForOf]="filteredInvoices">
        <table class="table table-hover service-item-set-rows-marker">
          <thead class="thead-inverse">
            <tr>
              <th class="text-left">FV z dnia: {{ invoice.invoiceDate | date:'shortDate' }} </th>
              <th class="text-right customer-code-width"><strong>{{ invoice.customer.customerCode }}</strong></th>
              <th colspan="3"></th>
              <th class="text-right">
                <strong>{{ calculateNetto(passHereWhateverYouWouldLikeToHave) }}</strong>
              </th>
              <th colspan="3"></th>
              <th class="text-right">
                <strong>{{ calculateBrutto(passHereWhateverYouWouldLikeToHave) }}</strong>
              </th>
            </tr>
          </thead>

          <tbody>

            <!-- Invoice Items -->
            <tr *ngFor="let invoiceItem of invoice.invoiceItems">
                <td></td>
                <td class="text-right">{{ invoiceItem.remoteSystemServiceCode }}</td>
                <td colspan="2">{{invoiceItem.description}} <span class="glyphicon glyphicon-info-sign notes-indicator" title="{{ invoiceItem.notes }}" *ngIf="invoiceItem.notes"></span></td>
                <td class="text-right value-width"><strong>{{invoiceItem.quantity}} {{invoiceItem.units}}</strong></td>
                <td class="text-center sign-width"> x </td>
                <td class="text-right value-width"><strong>{{invoiceItem.netUnitPrice | currency:'PLN':false:'1.2-2'}}</strong></td>
                <td class="text-center sign-width"> + </td>
                <td class="text-right percent-width"><strong>{{invoiceItem.vatRate | number:'1.0-2'}} %</strong></td>
                <td class="text-center sign-width"> = </td>
                <td class="text-right value-width"><strong>{{invoiceItem.grossValueAdded | currency:'PLN':false:'1.2-2'}}</strong></td>
                <td></td>
            </tr>
          </tbody>
        </table>
      </template>
@Component({ /* ... */})
class YourComponent {
  /* ... */
  public calculateNetto(yourArg) {
    // baw się dobrze
  }
  
  public calculateBrutton(yourArg) {
    // baw się dobrze
  }
}
0

Dzięki. Czasami człowiek za bardzo próbuje sobie skomplikować problem :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1