34

テンプレートで日付、パーセント、および通貨のパイプを使用する場合、同じ問題が発生します—</p>

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

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

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

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

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

4

4 に答える 4

68

これは、内部化 API に依存しているためです。これは現在、すべてのブラウザーで使用できるわけではありません (たとえば、iOS ブラウザーでは使用できません)。

適合表をご覧ください。

これは既知の問題です (beta.1)。

Intl にポリフィルを使用してみることができます。

これを行うには、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';
于 2016-01-26T16:06:29.530 に答える
1

または、別の解決策は、それらのパイプを自分で作成することです。たとえば、日付には 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;
    }
}

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

于 2016-11-09T09:18:54.160 に答える
0

これが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 とハイライト ディレクティブも使用していることに注意してください。明らかに必要ありません。

結果の画像

于 2017-01-04T23:11:56.330 に答える