Значение в элементе DOM не обновляется, а в компоненте обновляется - PullRequest
Новая
       6

Значение в элементе DOM не обновляется, а в компоненте обновляется

0 голосов
/ 08 июня 2018

В настоящее время я сталкиваюсь с проблемой обновления значения в DOM.

header.component.ts 

export class HeaderComponent implements OnInit {

  purchaseSummary = 0;

  constructor(private someService: SomeService) {
  }

  ngOnInit() {
    this.someService.summary.subscribe(
      observer => this.purchaseSummary = observer
    );
  }

}

header.html

<a>{{purchaseSummary}}</a>

some.service.ts 

@Injectable()
export class SomeService {

  summary = new Subject<number>();

}

purchase.service.ts 

@Injectable()
export class PurchaseService {

  products: { name: string, price: number }[] = [];

  constructor(private someService: SomeService) {
  }

  addProduct(product: { name: string, price: number }) {
    this.products.push(product);
    this.someService.summary.next(this.countSummaryPrice());
  }

  deleteProduct(id: number) {
    this.products.splice(id, 1);
    this.someService.summary.next(this.countSummaryPrice());
  }

  countSummaryPrice() {
    let sum = 0;
    for (let i = 0; i < this.products.length; i++) {
      sum += this.products[i].price;
    }
    return sum;
  }

}

Когда я выполняю в другом DOM PurchaseService # addProduct , это обычно увеличивает мое значение в header.html .Когда я пытаюсь удалить продукт, выполнив PurchaseService # deleteProduct , он удаляет элемент из массива, но значение в header.html не изменяется.Также я пытался console.log () результат PurchaseService # countSummaryPrice в PurchaseService # deleteProduct метод.Он регистрирует ожидаемое значение , но не изменяет его в header.html

UPD: Забыл о месте, где отображается: purchase.component.html 

<table>
  <thead>
  <tr>
    <th >#</th>
    <th >Product</th>
    <th >Price</th>
    <th >&</th>
  </tr>
  </thead>
  <tbody *ngFor="let product of products; let i = index">
  <th scope="row">{{i+1}}</th>
  <td>{{product.name}}</td>
  <td>{{product.price}}</td>
  <td><button class="btn btn-danger" (click)="onDelete(i)">X</button></td>
  </tbody>
</table>

и purchase.component.ts 

export class PurchaseComponent implements OnInit {

  products: { name: string, price: number }[];

  constructor(private purchaseService: PurchaseService) { }

  ngOnInit() {
    this.products = this.purchaseService.products;
  }

  onDelete(id: number) {
    this.purchaseService.deleteProduct(id);
  }

}

1 Ответ

0 голосов
/ 08 июня 2018

Если у вас есть данные о продуктах, попробуйте обновить их после удаления продуктов. 

 deleteProduct(id: number) {
    this.removeProduct(productId);
    this.someService.summary.next(this.countSummaryPrice());
  }

removeProduct(productId) {
    for (let i = 0; i < this.products.length; i++) {
      if (this.products[i].id === productId) {
        this.products.splice(i, 1);
        break;
      }
    }
  }
...