Javascript Angular2-模型更改后的调用方法

我的angular2应用程序中有一个简单的组件：

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css'],
  providers: [ProductService, CardService]
})
export class ProductComponent implements OnInit {
  private products;

  constructor(private productService: ProductService, private cartService: CartService) {
  }

  ngOnInit() {
    this.loadProducts();
  }

  loadProducts() {
    this.productService.getProducts().subscribe(data => this.products = data);
  }

  addProductToCart(product: Product) {
    this.cartService.addProduct(product);
  }

  basketAmount() {
    this.cartService.getNumberOfProducts();
  }

html

连接到它的文件：

<div class="basket">
  On your card: {{basketAmount()}}
</div>

<table class="table table-striped">
  <thead class="thead-inverse">
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Desc</th>
    <th>Price</th>
    <th>Amount</th>
  </tr>
  </thead>
  <tbody *ngFor="let product of products">
  <tr>
    <th scope="row">{{product.id}}</th>
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.price}}</td>
    <td>{{product.amount}}</td>
    <button type="button" class="btn btn-success" (click)="addProductToCart(product)">Add to cart</button>
  </tr>
  </tbody>
</table>

我想在向购物车中添加一些内容并在视图中显示后更新购物车上的项目数。我通过单击并调用

addProductToCart

方法将项目添加到购物车。同时，我想通过

basketAmount（）

更新一些此类物品，该工具在

CartService

中定义，并返回购物车上的物品数量。我想我应该以某种方式触发这个

basketAmount（）

方法，但我不知道如何触发。

---

如何以一种好的方式做这件事

您有多种选择

在您的购物车中推送商品后，只需再次调用basketAmount方法，您就应该有了新的值

您可以使用

BehaviorSubject

。在这种情况下，您只需要订阅它，每次将项目推送到购物车时，它都会自动更新您的购物车 好的，我找到了解决办法。 我在

ProductComponent

中添加了一个简单的numberOfItems变量：

export class ProductComponent implements OnInit {
  private products;
  private numberOfItems;

  constructor(private productService: ProductService, private cardService: CardService) {
  }

  ngOnInit() {
    this.loadProducts();
  }

  loadProducts() {
    this.productService.getProducts().subscribe(data => this.products = data);
  }

  addProductToCard(product: Product) {
    this.cardService.addProduct(product);
  }

  basketAmount() {
    this.numberOfItems = this.cardService.getNumberOfProducts();
  }
}

在视图中，单击并更新numberOfItems后，我调用了两个方法：

  <div class="basket">
     On your card: {{numberOfItems}}
    </div>

    <table class="table table-striped">
      <thead class="thead-inverse">
      <tr>
        <th>#</th>
    <th>Name</th>
    <th>Desc</th>
    <th>Price</th>
    <th>Amount</th>
      </tr>
      </thead>
      <tbody *ngFor="let product of products">
      <tr>
        <th scope="row">{{product.id}}</th>
        <td>{{product.name}}</td>
        <td>{{product.description}}</td>
        <td>{{product.price}}</td>
        <td>{{product.amount}}</td>
        <button type="button" class="btn btn-success" (click)="addProductToCard(product); basketAmount()">Add to card</button>
      </tr>
      </tbody>
    </table>

在您的卡上：{{numberOfItems}
#
名称
描述
价格
数量
{{product.id}
{{product.name}
{{product.description}}
{{product.price}}
{{product.amount}}
添加到卡

您的

getProducts（）

在哪里？是的，我知道这很奇怪。我会换的。谢谢你的帮助。

  <div class="basket">
     On your card: {{numberOfItems}}
    </div>

    <table class="table table-striped">
      <thead class="thead-inverse">
      <tr>
        <th>#</th>
    <th>Name</th>
    <th>Desc</th>
    <th>Price</th>
    <th>Amount</th>
      </tr>
      </thead>
      <tbody *ngFor="let product of products">
      <tr>
        <th scope="row">{{product.id}}</th>
        <td>{{product.name}}</td>
        <td>{{product.description}}</td>
        <td>{{product.price}}</td>
        <td>{{product.amount}}</td>
        <button type="button" class="btn btn-success" (click)="addProductToCard(product); basketAmount()">Add to card</button>
      </tr>
      </tbody>
    </table>