无法计算我的购物车中的总计

Question

我创建了一个包含 2 个组件（产品列表和购物车列表）的购物车。当我单击产品列表中的“添加到购物车”按钮时，它已成功移入服务文件并从服务文件移至“购物车列表”，但 Total 显示未定义。请帮我解决这个购物车 Total 问题。

Product-list.ts 文件

    import { Component, OnInit } from '@angular/core';
    import { ProductService } from '../../../service/product.service';
    import { CartService } from '../../../service/cart.service';
    
    @Component({
      selector: 'app-product-list',
      templateUrl: './product-list.component.html',
      styleUrls: ['./product-list.component.css']
    })
    export class ProductListComponent implements OnInit {
    
      Productlist = [];
    
    
      constructor(private productservice: ProductService,
                  private cartservice: CartService) {
    
        this.Productlist = this.productservice.send()
       }
    
      ngOnInit(): void {
      }
    
      saveproduct(item) {
    
        this.cartservice.get(item)
    
      }
    }

    

购物车服务文件

    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class CartService {
    
      cartproducts = [{Name: 'Mobile', Price: 13000, Qty: 1}]
    
      constructor() { }
    
    
      send() {
    
        return this.cartproducts
      }
    
       get(items) {
    
        this.cartproducts.push(items)
    
        console.log(this.cartproducts)
       }
    }
    

购物车列表文件

    
    import { Component, OnInit, ɵConsole, ɵɵNgOnChangesFeature } from '@angular/core';
    import { CartService } from '../../../service/cart.service';
    
    @Component({
      selector: 'app-cart',
      templateUrl: './cart.component.html',
      styleUrls: ['./cart.component.css']
    })
    export class CartComponent implements OnInit {
    
      cartlist = [];
    
      Total: number;
    
      constructor( private cartservice: CartService) {
    
        this.cartlist = this.cartservice.send()
    
        console.log(this.cartlist);
    
        console.log(this.Total);
        
       }
    
      ngOnInit() {
    
        this.cartlist.forEach((_e: any) => {
    
          this.Total += (_e.qty * _e.price);
      
        });
      }
    }

Answer 1

创建Total 属性后，默认为undefined，直到您为其分配值。您确实在ngOnInit 中为其分配了一个值，但您计算的是undefined 值，因此它也返回undefined。给Total 一个默认值，如下所示：

    ...

    Total: number = 0;

    ...

此外，您在ngOnInit 中输入用于计算Total 的代码最好放在get 属性中。这样，Total 将始终在请求时计算，而不是预渲染，并且只计算一次。在这种情况下，您的代码将如下所示：

    get Total(): number {
      let value = 0;
      this.cartlist?.forEach((_e: any) => {
          value += (_e.qty * _e.price);
        });
      return value;
    }