Процентное содержание ионных 3 - PullRequest
0 голосов
/ 19 октября 2018

Мне нужно знать, есть ли у меня 2 кнопки, Button 1 и Button2, и я хочу знать процент нажатий кнопок.Это означает, что если пользователь нажимает button 1, он должен показывать 100% на кнопке 1, а если другой пользователь нажимает button 2, он должен показывать 50% на button 1 и 50% на button 2.любая помощь, пожалуйста?

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++;
  }
}                                                                     

Вот как я беру номер клика

Пример изображения пожалуйста, посмотрите, как на этом изображении должен отображаться процент, подобный этому

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Итак, Сэнди дал вам базовую формулу и способ ее использования в шаблоне с помощью {{}}.Теперь, если вы хотите переместить логику вычислений в 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

0 голосов
/ 19 октября 2018

Вы можете добавить приведенный ниже код на своей html-странице для отображения процентов каждой кнопки:

процент кнопки1: {{(clickvalue1>0)?(clickvalue1/(clickvalue1+clickvalue2))*100 : 0}}%
процент кнопки 2: {{(clickvalue2>0)?(clickvalue2/(clickvalue1+clickvalue2))*100 : 0}}%

Надеждаэто поможет вам.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...