Обновление данных в угловом представлении, которые связаны с функцией в файле .ts каждый раз, когда обнаруживается изменение - PullRequest
Новая
       6

Обновление данных в угловом представлении, которые связаны с функцией в файле .ts каждый раз, когда обнаруживается изменение

0 голосов
/ 11 мая 2018

Я создаю приложение электронной коммерции в MEAN-стеке. Для создания приложения в режиме реального времени я использую pusher-js. Чтобы отобразить номер определенного элемента в корзине, я использовал функцию в файле ts, которая перебирает все элементы в корзине (которая является входным свойством для компонента карты продукта) и находит номер этого предмета в корзине, а затем отображает его. 

<div *ngIf="product.name" class="card" style="width: 23rem;">
    <img *ngIf="product.url" class="card-img-top" [src]="product.url" alt="{{ product.name }}">
    <div class="card-body">
        <h5 class="card-title">{{ product.name }}</h5>
        <p class="card-text">{{ product.price | currency:'USD':true }}</p>
    </div>
    <div class="card-footer" *ngIf="showActions">
        <div class="row">
            <div class="col-4">
                <button 
                class="btn btn-secondary btn-block active"
                [disabled]="productQuantity === 0"
                (click)="removeFromCart(product)">
                    Remove
                </button>
            </div>
            <div class="col quantity">{{ getQuantity() }} in Cart</div>
            <div class="col-4">
                <button 
                class="btn btn-secondary btn-block"
                (click)="addToCart(product)">
                    Add
                </button>                    
            </div>
        </div>                                              
    </div>

Это html-файл компонента. 10-я строка из последней указывает на использование функции getQuantity (). Эта функция определена в следующем файле: 

import { ShoppingCartService } from './../shopping-cart.service';
import { Product } from './../models/Product';
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.css'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class ProductCardComponent implements OnInit, OnChanges {

  @Input('product') product;
  @Input('show-actions') showActions = true;
  @Input('shopping-cart') shoppingCart;
  constructor(private cartService: ShoppingCartService) {
  }

  addToCart(product: Product) {
    this.cartService.addToCart(product);
  }

  removeFromCart(product: Product) {
    this.cartService.removeFromCart(product);
  }

  getQuantity() {
    if (!this.shoppingCart) {
      return 0;
    } else {
      const itemsArray = this.shoppingCart.items;
      for (let i = 0; i < itemsArray.length; i++) {
        if (itemsArray[i]._id === this.product._id) {
          return itemsArray[i].quantity;
        }
      }
      return 0;
    }
  }

  ngOnInit() {
  }
}

Всякий раз, когда я добавляю товар в корзину, pusher-js отправляет событие со стороны сервера. Я не могу понять, когда нужно перехватить событие с угловой стороны, а затем снова вызвать функцию getQuantity (), чтобы представление обновлялось в реальном времени.

1 Ответ

0 голосов
/ 11 мая 2018

Вам не нужно слушать событие pusher-js, в вашем коде должно быть все.

Во-первых, я бы определил свойство quantity и использовал бы его в шаблоне вместо getQuantity(). getQuantity() будет обновлять только this.quantity.

Далее, я бы назвал getQuantity() после того, как методы cartService addToCart() или removeFromCart() будут завершены. Теперь это зависит от того, возвращают ли методы Promise или Observable. В случае, если это Promise (что, вероятно, так как вы не вызываете метод subscribe), он будет выглядеть следующим образом: 

this.cartService.addToCart(product)
    .then(data => { 
        getQuantity(); 
    });
...