javascript - 使用 ionic 根据输入文本计算价格

Question

我想创建一个带有价格的简单购物 list 应用程序。

这是我的购物.html

    <ion-header>
      <ion-navbar color="secondary">
        <ion-title align="center">
          My Shopping Tracker
        </ion-title>
        <ion-buttons end>
          <button ion-button icon-only (click)="addItem()"><ion-icon name="cart"></ion-icon></button>
        </ion-buttons>
      </ion-navbar>
    </ion-header>


    <ion-content>
      <ion-list>
        <ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.type}}</ion-item>
      </ion-list>
    </ion-content>

    <ion-content>
      <ion-list>
        <ion-item-sliding *ngFor="let item of items">
          <ion-item>
            <h2>{{item.today}}</h2>
            <p>{{item.type}}</p>
            <p>{{item.total}}</p>
          </ion-item>
          <ion-item-options side="right">
            <button ion-button (click)="delete(item)">
              <ion-icon name="trash"></ion-icon>Delete
            </button>
            <button ion-button (click)="edit(item)">
              <ion-icon name="redo"></ion-icon>Edit
            </button>
          </ion-item-options>
        </ion-item-sliding>
      </ion-list>
    </ion-content>

    <ion-footer>
      <ion-toolbar >
        <ion-title>{{total}}</ion-title>
      </ion-toolbar>
    </ion-footer>

这是addshopping.html

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>
      Add Shopping List
    </ion-title>
      <ion-buttons end>
        <button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
      </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>

    <ion-item>
      <ion-label>Date:</ion-label>
     <ion-datetime displayFormat="DD-MM-YYYY HH:mm" [(ngModel)]="today"></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label floating>Type:</ion-label>
      <ion-input type="text" [(ngModel)]="type"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Description:</ion-label>
      <ion-input type="text" [(ngModel)]="description"></ion-input>
    </ion-item>


    <ion-item>
      <ion-label floating>Total Amount:</ion-label>
      <ion-input type="text" [(ngModel)]="total"></ion-input>
    </ion-item>

  </ion-list>

  <button full ion-button color="secondary" (click)="saveItem()">Save</button>

</ion-content>

这是我的 addlist.ts

    import { Component } from '@angular/core';
    import { NavController, ViewController } from 'ionic-angular';


    @Component({
      selector: 'page-addlist',
      templateUrl: 'addlist.html'
    })
    export class AddListPage {

      type: string;
      description: string;
      today: Date;
      total: price;
      constructor(public navCtrl: NavController, public view: ViewController) {

      }

      saveItem(){

        let newItem = {
          type: this.type,
          today: this.today,
          description: this.description,
          total: this.total,
        };

        this.view.dismiss(newItem);

      }

      close(){
        this.view.dismiss();
      }

    }

每次添加新商品时如何计算总价？并将其显示在页脚上？我上传了图片。

我需要将字符串值更改为数字值吗？还是将其保留为字符串？

Answer 1

您可以使用返回总价的函数，如下所示

private getTotalPrice() {
    let totalPrice = 0;
    for (let item of itens) {
      totalPrice += Number.parseFloat(item.total);
    }
    return totalPrice;
  }

然后你可以在页脚中调用它

[(ngModel)]="getTotalPrice()"