Ionic 2 范围：值到文本答案

【问题标题】：Ionic 2 Range: Value to TextIonic 2 范围：值到文本
【发布时间】：2017-11-13 11:17:28
【问题描述】：

我想将我的“范围”值转换为文本。

例如，如果 Range 达到“100”，则“Pin”和“Value '{{train}}'”不应显示“100”，而应显示“OneHundred”。

到目前为止，这是我的代码。

HTML：

          <ion-item>
            <ion-range min="0" max="400" pin="true" step="100" snaps="true"  [(ngModel)]="train" color="secondary">

            </ion-range>
          </ion-item>
<span>{{train}}</span>

TS（使用此设置默认范围）：

export class MyFancyClass {
train = 200;
}

希望有人能帮帮我！已经谢谢了。

【问题讨论】：

stackoverflow.com/questions/14766951/…
谢谢，我会深入研究一下。但是我没有使用 Javascript，所以这对我来说有点困难，因为我对 Typescript 很陌生。
typescript 是 javascript 的超集。它只是有严格的类型检查

标签： html angular typescript ionic2 range

【解决方案1】：

你可以安装这个 npm 包

https://www.npmjs.com/package/number-to-text

而且它还支持多种语言

例子：

var numberToText = require('number-to-text')
require('number-to-text/converters/en-us'); // load converter 

numberToText.convertToText('123456') 
//One Hundred Twenty Three Thousand, Four Hundred Fifty Six

在给定的链接上有很多例子。

【讨论】：

这行得通，但有一个误解。我想用数组自己配置它。例如，如果范围值 = 100，则引脚应输出 MY FANCY TEXT，如果值达到 200，则引脚应输出不同的文本。

【解决方案2】：

我修好了。（注意我使用了一个图标插件，所以如果你没有在你的应用程序中安装它们，这些通常不适合你）：

<i primary range-left class="fa fa-bicycle"></i>
<i primary range-right class="fa fa-train"></i>

HTML：

        <ion-list-header>
          <ion-badge item-right>{{ trainvalue }}</ion-badge>
        </ion-list-header>
        <ion-item>
          <ion-range min="0" max="400" pin="false" step="100" snaps="true" [(ngModel)]="train" color="primary" (ngModelChange)="onChangeTrain($event)">
            <i primary range-left class="fa fa-bicycle"></i>
            <i primary range-right class="fa fa-train"></i>
          </ion-range>
        </ion-item>

TS：

    export class MyFancyClass {
                train = 200;
                trainvalue: any;
                textChangeTrain: any;
                }
    constructor(public navCtrl: NavController, public navParams: NavParams) {
               this.textChangeTrain = ["Not Important", "Not that Important", "Neutral", "Important", "Very Important"];
               this.trainvalue = this.textChangeTrain[2];
            }


onChangeTrain() {
            if (this.train == 0) { this.trainvalue = this.textChangeTrain[0] }
            if (this.train == 100) { this.trainvalue = this.textChangeTrain[1] }
            if (this.train == 200) { this.trainvalue = this.textChangeTrain[2] }
            if (this.train == 300) { this.trainvalue = this.textChangeTrain[3] }
            if (this.train == 400) { this.trainvalue = this.textChangeTrain[4] }
        }

它是如何工作的：这会检查 Range 是否正在被使用。

(ngModelChange)="onChangeTrain($event)"

这就是它的功能。如果 Range 的值为“0”，那么我们从 {{trainvalue}} 调用 this.trainvalue，它会检查数组中的正确数字并将其替换为文本。

onChangeTrain() {
if (this.train == 0) { this.trainvalue = this.textChangeTrain[0] }

这用于声明我们的值。火车= 200；将 Range 设置为默认值 200，trainvalue:any；使我们能够使用与 textChangeTrain 相同的值执行任何操作：any;

train = 200;
trainvalue: any;
textChangeTrain: any;

在这里，我们添加数组并将 trainvalue 设置为 [2]，这意味着我们将其设置为 200，但我们写入 [2] 因为我们是从数组中调用它。

this.textChangeTrain = ["Not Important", "Not that Important", "Neutral", "Important", "Very Important"];
this.trainvalue = this.textChangeTrain[2];
}

我希望这对将来的某人有所帮助，编码愉快。

【讨论】：