Question

我是角度编程的新手，如果我的问题结构不好，请耐心等待。我正在尝试创建一个简单的食品订购应用程序，所以我有一个服务，可以从json文件中提取模拟数据，并且还包含一些处理数据的方法。

import { Injectable, FactoryProvider } from '@angular/core';
import { groupBy, remove, find } from "lodash";
import { foodItems } from "./food-items.constants"
import { Router } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class DataService {
      private foodz = foodItems;
      private cart = [];
      private CartObject = {};
      private totalAmount: number = 0;
      constructor(private router: Router) {

      }
      getTotal() {
        return this.totalAmount;
      }
      getCart() {
        return this.cart;
      }

      getFoodItems() {
        let items = groupBy(this.foodz, function (food) {
          return food.cuisine;
        });
        return items;
      }
      addItemToCart(item) {
        let cartItem = find(this.cart, function (cartObject) {
          if (cartObject.itemName === item.itemName) {
            cartObject.quantity++;
            cartObject.Amount = cartObject.quantity * item.pricePerUnit;
            return true;
          }
        });
        if (cartItem) {
          this.totalAmount += Number(item.pricePerUnit);
          alert(this.totalAmount);

        }
        if (!cartItem) {
          this.cart.push({
            'itemName': item.itemName,
            'quantity': 1,
            'Amount': item.pricePerUnit
          });
          this.totalAmount += item.pricePerUnit;
          alert(this.totalAmount);

        }
        return true;
      }
      removeItemFromCart(item) {
        let cartItem = find(this.cart, (cartObject) => {

          if (cartObject.itemName === item.itemName) {
            if (cartObject.quantity == 1) {
              this.totalAmount -= item.pricePerUnit;
              alert(this.totalAmount);
              remove(this.cart, function (cObject) {
                if (cObject.itemName == item.itemName) {
                  return true;
                }
              });
            }
            else {
              cartObject.quantity--;
              cartObject.Amount = cartObject.quantity * item.pricePerUnit;
              this.totalAmount -= item.pricePerUnit;
              alert(this.totalAmount);
              return true;
            }
          }
        });
        if (!cartItem) {

        }
        return true;
      }
}

接下来，我有一个组件，该组件通过DI以及通过用户尝试在我的购物车中添加和删除食物的操作来提供此服务的实例。问题虽然我的购物车正在正确更新，但是一旦我从购物车中添加或删除商品，total变量就不会立即更新。这是我的component.ts文件的内容。

      import { Component, OnInit } from '@angular/core';
  import { DataService } from '../data.service';

  @Component({
    selector: 'app-add-card',
    templateUrl: './add-card.component.html',
    styleUrls: ['./add-card.component.css']
  })
  export class AddCardComponent implements OnInit {
    private cart = [];
    private total: number;

    constructor(private foodService: DataService) {

    }

    ngOnInit() {
      this.cart = this.foodService.getCart();
      this.total = this.foodService.getTotal();

    }
  }

这是我的视图component.html文件，用于显示购物车摘要。

<div class="menu text-center" > <br>
 <h1><span>{{ total | currency: "INR" }}</span></h1 > <br>
</div>
< br >

<div class="menu" style = "margin-bottom: 30px" >
  <div class="heading text-center" >
    <span>Order Details < /span>
  </div>


  < div class="item" * ngFor="let item of cart" >
        <span style="width:50%;display:inline-block" > {{ item.itemName }}</span>
        <span style = "width:20%;display:inline-block" > Qua.{ { item.quantity } } </span>
         <span > {{ item.Amount | currency: "INR" }} { { cart.total } } </span>
    </div>
</div>

Answer 1

它不会更新，因为您没有在听服务中对total值所做的更改。

为您的服务中的总价值添加一个主题，组件可以订阅该主题中的更改并相应地更新其变量。

在您的服务中，输入类似以下内容：

public totalObs = new Subject()

只要您在服务中更新总数，就可以这样做：

this.totalObs.next(this.total)

在您的组件中具有以下内容：

totalSub: Subscription
ngOnInit() {
   this.cart = this.foodService.getCart();
   this.totalSub = this.foodService.totalObs.subscribe((total) => {this.total = total}); 
}

ngOnDestroy() {
    if (this.totalSub) {
        this.totalSub.unsubscribe()
    }
}

Angular View无法更新数据

1 个答案: