Javascript 编辑购物车中的项目

我正在建立一个订购比萨饼的项目，我想按特定的顺序编辑比萨饼的配料

我有一个按钮来选择浇头。当我点击按钮时，它变为蓝色

我的问题是如何添加到报税表中，选择按钮顶部，蓝色按钮保持蓝色

例如，我选择了洋葱和橄榄的顶部，它们的按钮现在是蓝色的，当我想改变我的选择时，我希望洋葱和橄榄的按钮保持蓝色

指令

@Directive({
  selector: '[appButton]'
})
export class ButtonDirective  {

  constructor(private elRef: ElementRef, private renderer: Renderer2) {

  }
@HostListener('mousedown') onmousedown() {
   if (this.elRef.nativeElement.style.backgroundColor === 'blue') {
    // console.log(this.elRef.nativeElement);
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'rgba(200,0,0,0.7)');
   } else {
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');

   }
}

public addItemCart(cart: Cart) {
  this.cart.push(cart);
  this.cartChanged.next(this.cart.slice());
  this.price += cart.price;
}

html

<div class="row choiceBoxTopping" style="position: relative; top: 90px; padding-top: 10px ">
  <p style="padding-left: 10px">Please choose a Topping</p>
  <app-button *ngFor="let topping of toppings; let i = index"
              [topping]="topping"
              [index]="i"></app-button>
  <button class="btn btn-primary" style=" position:absolute; bottom: 7px; right: 20px" (click)="onContinue()">Continue</button>
</div>

服务

@Directive({
  selector: '[appButton]'
})
export class ButtonDirective  {

  constructor(private elRef: ElementRef, private renderer: Renderer2) {

  }
@HostListener('mousedown') onmousedown() {
   if (this.elRef.nativeElement.style.backgroundColor === 'blue') {
    // console.log(this.elRef.nativeElement);
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'rgba(200,0,0,0.7)');
   } else {
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');

   }
}

public addItemCart(cart: Cart) {
  this.cart.push(cart);
  this.cartChanged.next(this.cart.slice());
  this.price += cart.price;
}

---

当您将浇头列表保存在购物车中时，您可以使用它添加样式。 因此，当选择浇头时，您将看到它是蓝色的，否则，它将是红色的。这可以使用类来完成

您可以在ngOnInit中查看浇头，然后向其添加一个

选定的
字段

ngOnInit() {
  this.toppings = this.toppings
    // Create new array with selected field;
    .map(topping => {
      // Check if the topping is selected
      const isSelected = this.mealService.getTopping()
        .some(selectedTopping => topping.name === selectedTopping.name);
      topping.selected = isSelected;
      return topping; 
    })
}

在样式表中：

.red {
  background: red;
}

.blue {
  background: blue;
}

在模板中：

<div class="col-md-4" style= "padding-top: 10px;">
  <button type="button" class="btn"  style="width: 110px" (click)= "onClickDown(topping)" 
    [ngClass]="{'red': !topping.selected, 'blue': topping.selected }" >
  {{topping.name}}
  </button>
</div>

你能再解释一下吗？你的意思是当我回去选择其他东西时，蓝色丢失了吗？我有一个比萨订购单，上面有配料我想重新编辑比萨配料，我想编辑之前已经选择的配料按钮时，将其编辑为蓝色，其他所有东西都是红色请检查答案
onClickDown(topping) {
  topping.selected = !topping.selected;
}