Question

在角度5中我创建了一个应用程序，用户可以在其中选择产品数量，一旦完成，产品价格将以总价格显示。但这里有数量限制。因此，假设一个产品有最大数量限制4，那么用户可以添加最多4个数量，不超过4个。如果他这样做，那么他将得到一些消息。

到目前为止，这是我的代码

app.component.html看起来像这样

<table class="table event-package-table">
  <thead>
    <tr>
      <th class="ticket-type"><h6>Ticket Type</h6></th>
      <th class="price"><h6>Price</h6></th>
      <th class="quantity"><h6>Quantity</h6></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let package of packagesArray">
      <td>{{package.tickettype}}</td>
      <td>{{package.price}}</td>
      <td>
        <div class="container quantity-spinner-wrap">
          <div class="col-md-2">
            <div class="input-group number-spinner">
              <span class="input-group-btn">
                <button class="btn btn-default" data-dir="dwn">
                  <span class="glyphicon glyphicon-minus">-</span>
                </button>
              </span>
              <input type="text" class="form-control text-center" value="0">
              <span class="input-group-btn">
                <button class="btn btn-default" data-dir="up" (click)="addEventPackages(package.price,package.limit)" >
                   <span class="glyphicon glyphicon-plus">+</span>
                </button>
              </span>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>
<div>Total Price: {{Price}}</div>

和app.component.ts看起来像这样

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  eventPackagePrice = [];
  Price : number ;
  packagesArray = [
    {
      'tickettype': 'general', 'price' : 99, 'limit' : 4,
    },
    {
      'tickettype': 'vip', 'price' : 299, 'limit' : 2
    },
    {
      'tickettype': 'staff', 'price' : 79, 'limit' : 4
    },
    {
      'tickettype': 'service', 'price' : 109, 'limit' : 2
    }
  ]

  addEventPackages($price,$packageLimit) {
    this.eventPackagePrice.push($price);
    this.addPrice(this.eventPackagePrice);
  }

  addPrice($array) {
    let sum = 0;
     for (let i = 0; i < $array.length; i++){
      sum += $array[i];
   }
   this.Price = sum;
  }
}

另外在html中你可以看到数量框。我曾使用jQuery制作数量+1并制作-1。但我想以棱角分明的方式做到这一点。有人能告诉我怎么做吗？任何建议或建议都会非常明显。

以下是demo

Answer 1

看到你需要三个功能才能使它工作，一个用于增加数量，一个用于减少，一个用于计算价格。这也是您显示错误的地方。

此外，您还需要一个变量来保存每个项目的数量。

所以我为此制作了你的阵列

 packagesArray = [
{
  'tickettype': 'general', 'price' : 99, 'limit' : 4,quantity : 0
},
{
  'tickettype': 'vip', 'price' : 299, 'limit' : 2,quantity : 0
},
{
  'tickettype': 'staff', 'price' : 79, 'limit' : 4,quantity : 0
},
{
  'tickettype': 'service', 'price' : 109, 'limit' : 2,quantity : 0
}]

现在功能就像

    increase_quantity(temp_package){
    if(temp_package.limit == temp_package.quantity){
      return alert("Can't add more")
    }else{
      temp_package.quantity++
      this.Price += temp_package.price
    }
  }

  decrease_quantity(temp_package){
      if(temp_package.quantity == 0){
        return alert("can't be in minus")
      }
      temp_package.quantity--
      this.Price -= temp_package.price
  }
  countPrice(){
     this.Price = 0;
      for(let p of this.packagesArray){
        this.Price += p.price*p.quantity
      }
  }

最后这些电话将是

<tr *ngFor="let package of packagesArray">
  <td>{{package.tickettype}}</td>
  <td>{{package.price}}</td>
  <td>
    <div class="container quantity-spinner-wrap">
                  <div class="col-md-2">
                    <div class="input-group number-spinner">
                      <span class="input-group-btn">
                        <button class="btn btn-default" data-dir="dwn" (click)="decrease_quantity(package)">
                          <span class="glyphicon glyphicon-minus">-</span>
                        </button>
                      </span>
                      <input type="text" class="form-control text-center" [(ngModel)]="package.quantity" (change)="countPrice(package)">
                      <span class="input-group-btn">
                        <button class="btn btn-default" data-dir="up" (click)="increase_quantity(package)" >
                          <span class="glyphicon glyphicon-plus">+</span>
                        </button>
                      </span>
                    </div>
                  </div>
                </div>
  </td>
</tr>

正如您所看到的，我已将数量分配给对象本身的变量，我们用它来检查数量是应该增加还是减少，或者应该抛出错误。

附加工作Plunker以防万一。

Angular 5按数量添加产品并显示最大限价的总价

1 个答案: