web-dev-qa-db-ja.com

Ionic 2を使用して、Angular 2 iOSでパイプが切れる—「変数が見つかりません：Intl」

テンプレートで使用する場合、日付、パーセント、通貨のパイプで同じ問題を経験します—

たとえば、単純なパーセントパイプを使用しています。

{{ .0237| percent:'1.2-2' }}

Chromeで実行している場合は機能しますが、iOSデバイスにデプロイすると、次のエラーがスローされます。

「例外：ReferenceError：変数が見つかりません：Intl in [{{{{.0237 | percent： '1.2-2'}} ...」

他の誰かがこの問題に遭遇しましたか？どんな提案や助けも大歓迎です！ありがとう！

iosangularionic-frameworkionic2
34
Hunter

これは、すべてのブラウザで現在利用できない（たとえばiOSブラウザではない）内部化APIに依存しているためです。

互換性テーブル を参照してください。

これは 既知の問題 （beta.1）です。

国際向けポリフィル を使用してみてください。

これを行うには、CDNバージョンを使用して、これをindex.htmlに追加します。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

または、Webpackを使用する場合、NPMでIntlモジュールをインストールできます。

npm install --save intl

そして、これらのインポートをアプリに追加します。

import 'intl';
import 'intl/locale-data/jsonp/en';
68
cexbrayat

これには簡単な修正があります。追加する

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

<script src="cordova.js"></script>エントリの前のindex.htmlファイルに。

このgithubの回答を参照してください https://github.com/angular/angular/issues/3333#issuecomment-2033279

11
Stevo

または、別の解決策は、それらのパイプを自分で記述することです。たとえば、日付には、moment.jsを使用できます。または、通貨パイプの例を次に示します。

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({ name: 'currency' })

export class CurrencyPipe implements PipeTransform {
    constructor() {}

    transform(value: string, currencyString: string ) { 
        let stringOnlyDigits  = value.replace(/[^\d.-]/g, '');
        let convertedNumber = Number(stringOnlyDigits).toFixed(2);
        return convertedNumber + " " + currencyString;
    }
}

このパイプは通貨を変換しています。パーセントパイプはほぼ同じように機能します。正規表現は、浮動小数点のポイントを含むすべての数字をフィルタリングしています。

1
Highriser

これが私がRC3でやったことです。 RC4でも機能すると思います。

ionic g pipe pipe-transformと入力してパイプを作成します

コードを削除して@Injectableを削除します。また、キャメルケースを使用して、次のように名前を付けます。 PipeTransformを実装します。

import { Pipe, PipeTransform} from '@angular/core';

/**
 * Takes a number and transforms into percentage upto
 * specified decimal places
 *
 * Usage:
 * value | percent-pipe: decimalPlaces
 *
 * Example:
 * 0.1335 | percent-pipe:2
*/
@Pipe({
  name: 'percentPipe'
})
export class PercentPipe implements PipeTransform {
  /**
   * Takes a number and returns percentage value
   * @param value: number
   * @param decimalPlaces: number
   */
  transform(value: number, decimalPlaces:number) {
    let val = (value * 100).toFixed(decimalPlaces);
    return val + '%';
  }
}

app.moduleでdeclarations配列に追加します。

次に、htmlで上記の使用例のように使用します。これが私の例です

 <ion-col *ngIf="pd.wtChg < -0.05  || pd.wtChg > 0.05" width-25 highlight>
    {{pd.wtChg | percentPipe: 2}}
  </ion-col>

誰かが追加のヘルプが必要な場合に備えて、* ngIfとhighlightディレクティブも使用していることに注意してください。明らかに必要ではありません。

Resulting image

0
Mukus