角度视图不更新数据

Posted 2023-03-07

【中文标题】角度视图不更新数据

【英文标题】：Angular View not updating Data

【发布时间】：2019-04-29 10:50:15

【问题描述】：

我是角度编程的新手，所以如果我的问题结构不合理，请多多包涵。我正在尝试创建一个简单的食品订购应用程序，所以我有一项服务，同时从 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>

【问题讨论】：

你能创建一个带有现场演示的stackblitz，以便我们编辑它吗？ stackblitz.com

好的，我会做的。

Angular 2: How to detect changes in an array? (@input property)的可能重复

【参考方案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()
    

【讨论】：

感谢您的解决方案，我会尝试并回复您。只是一个补充问题：我在购物车中添加或删除商品后，我的购物车如何即时更新。我没有为此写任何东西，但它似乎在我没有写任何东西的情况下更新。

@GaganDeep 请展示您为更新购物车编写的组件代码，（HTMl 和 ts）

那个组件只是简单地调用this.foodService.addItemToCart(item);这样的服务方法@就是这样。我从 html 将项目发送给它。并将其添加到购物车中，我的视图会立即更新。

@GaganDeep cart 是一个数组，它的引用在组件和服务之间共享每当您在浏览器上执行操作（单击添加/删除）时，将运行更改检测并检查对于现有数据。 total 也应该发生同样的情况，但 total 是一个原始类型，它的引用不在组件和服务之间共享，因此服务中所做的更改不会影响组件中的更改。

好的。谢谢@xyz，当我随身携带笔记本电脑时，我会试试这个，然后回复你。感谢您的努力。