Вариация продукта и цены с использованием Angular 9

Question

Я хотел бы изменить цену продукта нажатием каждой кнопки, у меня есть 7 вариантов продукта, и цена привязана к каждому из них. Я хотел бы установить каждую цену в качестве основной цены при нажатии каждой кнопки. Ниже мой Product.component. html code

                <button class="naomi" id="naomi" (click)="priceChange1($event)" *ngIf = "product.price1">{{product.three}}</button>
                <button class="naomi" id="naomi" (click)="priceChange2($event)" *ngIf = " product.price2">{{product.four}}</button>
                <button class="naomi" id="naomi" (click)="priceChange3($event)" *ngIf = "product.price3">{{product.five}}</button>
                <button class="naomi" id="naomi" (click)="priceChange4($event)" *ngIf = "product.price4">{{product.six}}</button>
                <button class="naomi" id="naomi" (click)="priceChange5($event)" *ngIf = "product.price5">{{product.seven}}</button>
                <button class="naomi" id="naomi" (click)="priceChange6($event)" *ngIf = "product.price6">{{product.seventy}}</button>
                <button class="naomi" id="naomi" (click)="priceChange7($event)" *ngIf = "product.price7">{{product.baby}}</button>
              </div>
              <div class="col-6">
                <ngb-rating [(rate)]="product.averageRating" [starTemplate]="t" [readonly]="true" max="5"></ngb-rating>
              </div>
            </div>
            <hr>
            
            <hr>
            <p class="lead">{{ product.description }}</p>
            <br>
            <br>
            <p class="lead">{{ product.specs}}</p>
          </div>
          <div class="col-lg-3 father">
            <div class="card bg-light">
              <div class="card-body">
                <h5 class="card-title">Price:  ₦ {{ product.price}}  <del class=" price-old">{{product.oldprice}}</del> </h5> 
                
               
                <br>
                <br>

и Products.component.ts

  priceChange1(event) {
  
  this.product.price === this.product.price1
  }

   priceChange2(event) {
  this.product.price === this.product.price2 
}

  priceChange3(event) {
    this.product.price === this.product.price3
  }

  public priceChange4(event) {
   this.product.price === this.product.price4  
  }

  priceChange5(event) {
  this.product.price === this.product.price5
  }

  priceChange6(event) {
    this.product.price === this.product.price6
  }

  priceChange7(event) {
    this.product.price === this.product.price7
  }

Спасибо

Answer 1

Вы можете упростить это, используя только одну функцию, передающую цену продукта в каждой кнопке.

...
<button class="naomi" id="naomi" (click)="priceChange($event, product.price1)" *ngIf = "product.price1">{{product.three}}</button>
...

priceChange(event, newPrice) {
  this.product.price = newPrice
}

И, возможно, вам нужно создать компонент для повторного использования кода кнопки.