簡體   English   中英

Angular2-模型更改后的調用方法

[英]Angular2 - call method after model changed

我的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>

CartService

@Injectable()
export class CardService {
  private cart: Product[] = [];

  constructor() {
  }

  addProduct(product: Product) {
    this.cart.push(product);
  }

  getTotalPrice() {
    const totalPrice = this.cart.reduce((sum, cardItem) => {
      return sum += cardItem.price, sum;
    }, 0);
    return totalPrice;
  }

  getNumberOfProducts() {
    const totalAmount = this.card.reduce((sum, cardItem) => {
      return sum += cardItem.amount, sum;
    }, 0);
    return totalAmount;
  }
}

export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  amount: number;
}

在將商品添加到購物車並將其顯示在視圖中之后,我想更新購物車中的商品數量。 通過單擊將商品添加到購物車,然后調用addProductToCart方法。 同時,我想通過在CartService定義的basketAmount()更新一些商品,並返回購物車上的商品數量。 我想我應該以某種方式觸發這個basketAmount()方法,但我不知道如何。 如何以一種好的方式做到這一點?

您有多種選擇

  1. 將商品推入購物車后,只需再次調用basketAmount方法,您就應該擁有新的價值。
  2. 您可以使用BehaviorSubject 在這種情況下,您只需要訂閱它,每當您將商品推入購物車時,它將自動更新您的購物車。

好的,我找到了解決方案。 我將一個簡單的numberOfItems變量添加到ProductComponent

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM