Question

我希望我的ionic-app按照设备的语言显示数据。在这个特殊情况下，我已经在android模拟器上部署了apk，语言设置为西班牙语。但它显示通常的十进制（。）而不是逗号（，），如下面的屏幕截图所示。如何实现这一点，即根据设备的语言更改格式？

ts文件：

import { Modal1Page } from './../modal1/modal1';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { parse, format, AsYouType } from 'google-libphonenumber';
import { AlertController,ModalController,Modal, ModalOptions } from 'ionic-angular';
import { ModalPage } from '../modal/modal';
import { Globalization } from '@ionic-native/globalization';

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

  public inverse:boolean=false;
  public language:string='no value yet';

  constructor(public navCtrl: NavController,private alertCtrl: AlertController,private modalCtrl: ModalController,private globalization: Globalization) {

    this.globalization.getPreferredLanguage()
    .then(res => this.language=res.value)
    .catch(e => console.log(e));
  }
}

HTML：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-row>     
      <ion-label> I am installed on android device with language Spanish.</ion-label>
    </ion-row>
  <ion-row>
    <div >
      <div class="inner">
        <ion-label *ngIf="!inverse"  no-margin>1 USD = 67 INR</ion-label>
        <ion-label *ngIf="inverse" no-margin>1 INR = {{(1/67) | number }} USD </ion-label>
      </div>
      <button (click)="inverse=!inverse" ion-button clear class="iconWidth" color="dark">  <ion-icon name="swap" class="rotate"></ion-icon></button>
    </div>
  </ion-row>
<ion-row class="bottomRow">
  <p>Above row should show comma instead of decimal when inverse is clicked.Whats wrong there?</p>
  <ion-label> Thanks</ion-label>
</ion-row>
<ion-row>
  <ion-label>{{language}}</ion-label>
</ion-row>
</ion-content>

SCSS：

.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-bottom: 15px;
  }

.inner{
  display: inline-block;
  width:70%;

  }
.iconWidth{
  width:20%;
  }

  .bottomRow
  {
    margin-top: -20px;
  }

我是否需要在HTML文件中提及我的标签以检测当前设备的设置或语言。感谢您对此进行调查。

Answer 1

这Github thread肯定会帮助你。

您需要包含Intl.js polyfill。

离子标签不显示逗号

1 个答案: