ionic-framework - ionic 3在拖放后计算项目

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>

总价应显示在页脚

这是我的界面看起来像

希望有人可以提供帮助:)

标签： ionic-frameworkdrag-and-dropdragula

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>