Saya sedang membangun proyek untuk memesan pizza, dan saya ingin mengedit topping pizza dalam urutan tertentu.

Saya memiliki tombol untuk memilih topping. Tombol berubah menjadi biru ketika saya mengkliknya.

Masalah saya adalah apa yang harus dilakukan untuk menambahkan kembali, untuk memilih tombol topping dan tombol biru tetap biru.

Misalnya saya memilih topping bawang dan zaitun dan kancingnya sekarang berwarna biru, dan ketika saya ingin mengubah pilihan saya, saya ingin kancing bawang dan zaitun tetap biru.

Petunjuk

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

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

layanan

public addItemCart(cart: Cart) {
  this.cart.push(cart);
  this.cartChanged.next(this.cart.slice());
  this.price += cart.price;
}
0
gabyta 29 Oktober 2019, 22:57

1 menjawab

Jawaban Terbaik

Karena Anda memiliki daftar topping yang disimpan di troli, Anda dapat menambahkan gaya menggunakannya. Jadi ketika topping dipilih, Anda itu akan menjadi biru, jika tidak, itu akan menjadi merah. Ini dapat dilakukan dengan menggunakan kelas.

Anda dapat membahas topping sebelumnya di ngOnInit, dan menambahkan bidang selected ke dalamnya

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

Dalam lembar gaya:

.red {
  background: red;
}

.blue {
  background: blue;
}

Dalam templat:

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

Dan dalam fungsi onClickDown, Anda dapat mengubah flag selected

onClickDown(topping) {
  topping.selected = !topping.selected;
}
0
yazantahhan 29 Oktober 2019, 22:54