Question

我正在建立一个项目来订购披萨，我想按特定顺序编辑披萨的浇头。

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

我的问题是如何添加到退货中，以选择按钮顶部并让蓝色按钮保持蓝色。

例如，我选择洋葱和橄榄的顶部，并且它们的按钮现在为蓝色，并且当我要更改选择时，我希望洋葱和橄榄的按钮保持蓝色。

指令

.syntax--comment.syntax--line.syntax--double-slash

html

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

ts

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

服务

  onContinue() {

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

Answer 1

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

您可以在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函数中，您可以更改selected标志

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

编辑购物车中的项目

1 个答案: