Kann nicht die Gesamtkosten aller Artikel im Warenkorb

Question

Ich versuche, die Gesamtkosten aller Artikel im Warenkorb zu erhalten. Ich kann die Summe für jede {{item.rate * item.quantity}} erhalten, aber ich kann die Gesamtsumme aller Artikel im Warenkorb nicht finden.

Schätzung-detail.component.html

<tbody> 
     <tr *ngFor=" let item of Items"> 
      <td> 
      <a cart-button [item]="item" action="remove" class="btn btn-default btn-sm"> 
       X 
      </a> 
      </td> 
      <td>{{item.itemName}}</td> 
      <td>{{item.rate}}</td> 
      <td> 

      <custom-counter [(counter)]="item.quantity"></custom-counter> 

      </td> 
      <td>${{item.rate*item.quantity | number: '.2'}}</td> 
     </tr> 
     </tbody> 
     <tfoot> 
     <tr> 
      <td colSpan="4" class="text-right">Total</td> 
      <td>${{ Items | cartTotal | number: '.2'}}</td> 
     </tr> 
     </tfoot> 

totalPipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'cartTotal'}) 
export class TotalPipe implements PipeTransform { 

transform(value) { 
     console.log("here"); 
    let total = 0; 
    if (value) { 
     value.forEach(item => { 
      total += item.quantity * item.rate; 
     }); 
    } 
    return total; 
} 
} 

Ich bin in der Lage, das Rohr zu nennen, aber es nicht den Gesamt aktualisieren.

counter.component.ts

@Component({ 
    selector: 'custom-counter', 
    template: ` 
    <button (click)="decrement()">-</button> 
    <span>{{counter}}</span> 
    <button (click)="increment()">+</button> 
    ` 
}) 
export class CustomCounterComponent { 
counterValue = 0; 
    @Output() counterChange = new EventEmitter(); 

    @Input() 
    get counter() { 
    return this.counterValue; 
    } 

    set counter(val) { 
    this.counterValue = val; 
    this.counterChange.emit(this.counterValue); 
    } 

    decrement() { 
    this.counter--; 
    } 

    increment() { 
    this.counter++; 
    } 
} 

Answer 1

*ngFor=" let item of Items" ist Artikel mit Kapital i.

${{ items | cartTotal | number: '.2'}} ist Artikel mit Kleinbuchstaben i.

So ändern Sie items zu Items, oder ändern Sie alternativ die Eigenschaft in Ihrer Komponente zu items und es sollte funktionieren.