編輯購物車中的商品

Question

我正在構建一個訂購披薩的項目，我想按特定順序編輯披薩的配料。

我有一個 select 澆頭的按鈕。 當我單擊它時，該按鈕變為藍色。

我的問題是要做什么添加到返回，到 select 按鈕頂部和藍色按鈕保持藍色。

例如，我選擇洋蔥和橄欖的頂部，它們的按鈕現在是藍色的，當我想改變我的選擇時，我希望洋蔥和橄欖的按鈕保持藍色。

指示

@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');

   }
}

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>

html 應用按鈕

    <div class="col-md-4" style= "padding-top: 10px;">
    <button id="top" type="button" class="btn btn-danger"  style="width: 110px" appButton (click)= "onClickDown()"  >
      {{topping.name}}
    </button>
    </div>

ts

  onContinue() {

    this.carts = new Cart(this.mealService.getPizzaName(),
      this.mealService.getOrderChoosePrice(), this.mealService.getTopping());
    this.orderService.addItemCart(this.carts);
   }

服務

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

Answer 1

由於您已將配料列表保存在購物車中，因此您可以使用它添加 styles。 So when the topping is selected, the you it will be blue, otherwise, it will be red. 這可以使用類來完成。

您可以 go 在 ngOnInit 之前的澆頭上，並向其中添加一個selected的字段

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 function中，可以更改selected的標志

onClickDown(topping) {
  topping.selected = !topping.selected;
}