Question

我需要知道我是否有两个按钮Button 1和Button2，并且想知道按钮的点击百分比。意味着如果用户按下button 1，它必须在按钮1上显示100％并且如果另一个用户单击button 2，则必须在button 1上显示50％，在button 2上显示50％。有什么帮助吗？

export class FrontPage {
  clickvalue1: number;
  clickvalue2: number;

  constructor(
    public navCtrl: NavController,
    private alertCtrl: AlertController,
    public navParams: NavParams,
    public actionSheetCtrl: ActionSheetController
  ) {
    this.clickvalue1 = 0;
    this.clickvalue2 = 0;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FrontPage');
  }

  Question() {
    this.navCtrl.push(QuestionPage);
  }

  click1() {
    this.clickvalue1++;
  }

  click2() {
    this.clickvalue2++;
  }
}

这是我获取点击次数的方法

示例图片please seee this image need to show percentage like this

Answer 1

您可以在html页面中添加以下代码，以显示每个按钮的百分比：

button1百分比：{{(clickvalue1>0)?(clickvalue1/(clickvalue1+clickvalue2))*100 : 0}}%
button2百分比：{{(clickvalue2>0)?(clickvalue2/(clickvalue1+clickvalue2))*100 : 0}}%

希望它会对您有所帮助。

Answer 2

因此，桑迪使用{{}}为您提供了基本公式以及在模板中使用该公式的方法。现在，如果要将计算逻辑移到ts中：

//向该函数添加某种形式的索引作为参数：

<button ion-button (click)="clickedButton(1)"> Button 1, {{ clickPercentage1 }}% </button>
<button ion-button (click)="clickedButton(2)"> Button 2, {{ clickPercentage2 }}% </button>

ts文件中的

//具有方法clickedButton（index）：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  clickvalue1: number;
  clickvalue2: number;
  clickPercentage1: number;
  clickPercentage2: number;
  constructor(public navCtrl: NavController) {
    this.clickvalue1 = 0;
    this.clickvalue2 = 0;
    this.clickPercentage1 = 0;
    this.clickPercentage2 = 0;
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FrontPage');
  }

  Question() {
    this.navCtrl.push(QuestionPage);
  }

  clickedButton(index) {
    switch (index) {
      case 1:
        this.clickvalue1++;
        this.clickPercentage1 = this.clickvalue1 / (this.clickvalue1 + this.clickvalue2) * 100;
        this.clickPercentage2 = this.clickvalue2 / (this.clickvalue1 + this.clickvalue2) * 100;
        break;
      case 2:
        this.clickvalue2++;
        this.clickPercentage1 = this.clickvalue1 / (this.clickvalue1 + this.clickvalue2) * 100;
        this.clickPercentage2 = this.clickvalue2 / (this.clickvalue1 + this.clickvalue2) * 100;
        break;
    }
  }

}

这里正在进行堆叠闪电战：https://stackblitz.com/edit/ionic-vryoig

Ionic 3 onclick百分比

2 个答案: