Question

我是软件项目的新手，目前正在从事去年的项目，即使用ionic 3框架的移动应用程序。我具有拖放功能，第一个存储桶带有项目列表，第二个存储桶为空。当我想将物品从第一个存储桶拖到第二个存储桶时，我想计算第二个存储桶中每个条目的价格，但我真的不知道要这样做。有人可以帮我的代码：（

这是我的calculate.ts

  q1 = [];
  q2 = [];
  details: any = [];
  totalPrice: number;

  constructor(public navCtrl: NavController, private postPvdr: PostProvider, public navParams: NavParams, public dragulaService: DragulaService, public AlertController:AlertController) {

    dragulaService.drop().subscribe((value) => {

      console.log(value)
  });

    const bag: any = this.dragulaService.find('bag');
    if (bag !== undefined ) this.dragulaService.destroy('bag');

    this.dragulaService.createGroup('bag', {
      revertOnSpill: true,
    });


  }

  ionViewDidLoad() {
    this.details = [];
    this.getlist();
    this.getTotalPrice()
  }

  getlist(){
    let body = {
      aksi: 'get_user'
    };
    this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
      for(let detail of data.result){
        this.details.push(detail);
        console.log(data);
      }

    });
  }

  getTotalPrice(){
    let totalPrice = 0;
    let body = {
      aksi: 'get_user'
    };
    this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
    for(let detail of data.result){
      totalPrice += Number.parseFloat(detail.dest_budget);

    }
  });
  console.log(totalPrice);
    return totalPrice;
  }

这些代码行似乎很奇怪，因为我只是尝试尝试n错误

这是我的calculate.html

<ion-content padding>
  <ion-row>
    <ion-col width-50 class="left">
      <div class="header">First Bucket</div>
      <ion-list [dragula]='"bag"' [(dragulaModel)]="details">
        <button ion-item *ngFor="let detail of details">
          {{detail.dest_name}}
          <p>{{ detail.dest_budget}}</p>
        </button>
      </ion-list>
    </ion-col>

    <ion-col width-50 class="right">
      <div class="header">Second Bucket</div>
      <ion-list [dragula]='"bag"' [(dragulaModel)]="q2">
        <div ion-item *ngFor="let detail of q2">
          {{detail.dest_name}}
          <p>{{ detail.dest_budget }}</p>
        </div>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-content>

<ion-footer>
    <ion-toolbar>
      <ion-title>Total Price:</ion-title>
    </ion-toolbar>
  </ion-footer>

总价应显示在页脚

here is my interface looks like

希望有人可以提供帮助：）

Answer 1

此处调用功能

dragulaService.drop().subscribe((value) => {
    this.getTotalPrice();
});

修改功能

getTotalPrice(){
    this.totalPrice = 0;
    let body = {
        aksi: 'get_user'
    };
    this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
        for(let detail of data.result){
            this.totalPrice += Number.parseFloat(detail.dest_budget);
        }
    });
}

并绑定模型

<ion-footer>
    <ion-toolbar>
        <ion-title>Total Price:{{totalPrice}}</ion-title>
    </ion-toolbar>
</ion-footer>

ionic 3拖放后计算项目

1 个答案: