如何在angular 8中重置购物车详细信息

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private cartItems = [];

  getItems() {
    return this.cartItems;
  }

  addItem(item) {
    this.cartItems.push(item);
  }

  resetCart() {
    this.cartItems = [];
  }
}

import { Component, OnInit } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  cartItems;

  constructor(private cartService: CartService) {}

  ngOnInit() {
    this.cartItems = this.cartService.getItems();
  }

  resetCart() {
    this.cartService.resetCart();
    this.cartItems = this.cartService.getItems(); // 更新本地状态
  }
}

<div>
  <ul>
    <li *ngFor="let item of cartItems">{{ item.name }}</li>
  </ul>
  <button (click)="resetCart()">Reset Cart</button>
</div>