角度视图不更新数据

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()
    }
}