购物车价值在角度2中显示为空

Question

第1步：将杂货店详细信息从GroceryGridComponent.ts发送到cartservices.ts中的addgrocery方法

  //GroceryGridComponent.ts
  import { Component } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { Grocery } from '../auth/grocery.model';
  import { GroceryService } from '../auth/grocery.service';
  import { Cart,CartService } from '../user/cart/cart.service';

  @Component({
    selector: 'grocerygrid',
    templateUrl: './grocerygrid.component.html',
    providers: [GroceryService, CartService,Cart]
  })
  export class GroceryGridComponent {
    grocerys: any = [];

    constructor( private router: ActivatedRoute, private groceryService: GroceryService, private cartService: CartService) {
      console.log("jaja");
      this.router .queryParams.subscribe(params => {
          let category: string = params['category'];
          let search: string = params['search'];

          let grocerys: Grocery[] = groceryService.getProducts(category, search);
          this.grocerys = this.transform(grocerys);
        });
    }

    transform(source: Grocery[]) {
      console.log("source" + source);
      let index = 0;
      let length = source.length;

      let grocerys = [];

      while (length) {
        let row: Grocery[] = [];
        if (length >= 3) {
          for (let i = 0; i < 3; i++) {
            row.push(source[index++]);
          }
          grocerys.push(row);
          length -= 3;
        } else {
          for (; length > 0; length--) {
            row.push(source[index++]);
          }
          grocerys.push(row);
        }
      }

      return grocerys;
    }
     //sending grocery details as a parameter to addGrocery method
    addToCart(grocery: Grocery) {
      console.log(grocery);
      console.log(grocery.sno);
      this.cartService.addGrocery(grocery);
    }
  }

第2步：然后杂货店的详细信息应该转到下面的文件cartservices.ts

//CartService.ts
import { Injectable } from '@angular/core';
import { Grocery } from '../../auth/grocery.model';

export interface CartItem {
grocery: Grocery;
  count: number;
 amount: number;
 }
 export class Cart {
count: number = 0;
amount: number = 0;
  items: CartItem[] = [];
  }
  @Injectable()
  export class CartService {
  cart: Cart = new Cart(); 
  constructor(){}
  /* constructor(private Cart: Cart) {
  this.cart = Cart;
  }*/
  addGrocery(grocery: Grocery) {
  console.log(this.cart);
  console.log("gro" + grocery);
  console.log(grocery.sno);
  let item: CartItem = this.findItem(grocery.sno);
  console.log("first" + item);
  if (item) {
  item.count++;
  item.amount += grocery.cost;
  console.log("item" + item.amount);
  } else {
  item = {
    grocery: grocery,
    count: 1,
    amount: grocery.cost
  };
  console.log("else" + this.cart.items.push(item));
  this.cart.items.push(item);
  }
  this.cart.count++;
  this.cart.amount += grocery.cost;
  console.log("cart" + this.cart.amount);
  console.log(item);
  console.log(this.cart);
  return item;
  }
  removeProduct(grocery: Grocery) {
  let item: CartItem = this.findItem(grocery.sno);
  if (item) {
  item.count--;
  item.amount -= grocery.cost;
  if (!item.count) {
    this.remove(item);
  }
  this.cart.count--;
  this.cart.amount -= grocery.cost;
}
return item;
}
removeItem(item: CartItem) {
this.remove(item);
this.cart.count -= item.count;
this.cart.amount -= item.amount;
}
findItem(id: string): CartItem {
for (let i = 0; i < this.cart.items.length; i++) {
  if (this.cart.items[i].grocery.sno === id) {
    return this.cart.items[i];
  }
}
return null;
}
clearCart() {
this.cart.items = [];
this.cart.amount = 0;
this.cart.count = 0;
}
remove(item: CartItem) {
let indx: number = this.cart.items.indexOf(item);
if (indx !== -1) {
  this.cart.items.splice(indx, 1);
}
}
}

步骤3：在下面的方法中，杂货店的详细信息会逐渐增加。

//CartService.ts
addGrocery(grocery: Grocery) {
console.log(this.cart);
console.log("gro" + grocery);
console.log(grocery.sno);
let item: CartItem = this.findItem(grocery.sno);
console.log("first" + item);
if (item) {
  item.count++;
  item.amount += grocery.cost;
  console.log("item" + item.amount);
} else {
  item = {
    grocery: grocery,
    count: 1,
    amount: grocery.cost
  };
  console.log("else" + this.cart.items.push(item));
  this.cart.items.push(item);
}
this.cart.count++;
this.cart.amount += grocery.cost;
console.log("cart" + this.cart.amount);
console.log(item);
console.log(this.cart);
return item;
}

步骤4：在上述方法中，正在进行增量 但购物车详细信息未在以下代码中显示

//CartService.ts
@Injectable()
export class CartService {
// The values are not coming to the below cart 
cart: Cart = new Cart(); 
constructor(){}

第5步：调用上面的“cart：Cart = new Cart（）;”时的cartmenucomponent.ts文件来自carservice.ts，下面的组件然后没有显示值。

//CartMenuComponent.ts
import { Component } from '@angular/core';
import { Cart, CartService } from './cart.service';

@Component({
selector: 'db-cart-menu',
templateUrl: './cart-menu.component.html'
// providers: [CartService]
})
export class CartMenuComponent {
private cart1: Cart; 
constructor(private cartService: CartService) {
this.cart1 = this.cartService.cart;
}

public toggled(open: boolean): void {
console.log('Dropdown is now: ', open);
}
}