Angular DOM元素中的值为'；t在组件更新中同时更新

我目前在更新DOM中的值时面临一个问题

标题.component.ts

export class HeaderComponent implements OnInit {

  purchaseSummary = 0;

  constructor(private someService: SomeService) {
  }

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

}

@Injectable()
export class SomeService {

  summary = new Subject<number>();

}

@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;
  }

}

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);
  }

}

header.html

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

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

---

假设您拥有的数据是“产品”， 请尝试在删除产品时进行更新

 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;
      }
    }
  }

deleteProduct（id:编号）{
此.removeProduct（productId）；
this.someService.summary.next（this.countSummaryPrice（））；
}
removeProduct（productId）{
for（设i=0；i

谢谢，不幸的是，你的提示对我没有帮助：(