カートの全商品の合計費用を得ることができません

Question

カート内のすべての商品の合計費用を取得しようとしています。 {{item.rate * item.quantity}}の合計を得ることができましたが、カート内のすべてのアイテムの合計を見つけることができません。

推定-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; 
} 
} 

私はパイプを呼び出すことができていますが、それは、合計を更新しません。

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"資本Iとアイテムです。

${{ items | cartTotal | number: '.2'}}は、小文字iの項目です。

したがって、itemsからItemsに変更するか、コンポーネント内のプロパティをitemsに変更しても問題はありません。