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，它应该可以正常工作。

无法获得购物车中所有商品的总费用

1 个答案: