web-dev-qa-db-fra.com

Ionic 2, Utilisation de Angular 2 Coupures de tuyau sur iOS— "Impossible de trouver la variable: Intl"

Vous rencontrez le même problème avec les canaux de date, de pourcentage et de devise lors de leur utilisation dans un modèle:

Par exemple, j'utilise un simple tuyau de pourcentage:

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

Cela fonctionne lors de l'exécution sur Chrome, mais lorsque je déploie sur un appareil iOS, il génère cette erreur:

"EXCEPTION: ReferenceError: Impossible de trouver la variable: Intl dans [{{{{.0237 | percent: '1.2-2'}} ..."

Quelqu'un d'autre a-t-il rencontré ce problème? Toute suggestion ou aide serait grandement appréciée! Merci!

iosangularionic-frameworkionic2
34
Hunter

En effet, il repose sur l'API d'internalisation, qui n'est pas actuellement disponible dans tous les navigateurs (par exemple, pas sur le navigateur iOS).

Voir le tableau de compatibilité .

Il s'agit d'un problème conn (beta.1).

Vous pouvez essayer d'utiliser un polyfill pour Intl .

Pour ce faire, vous pouvez utiliser la version CDN et l'ajouter à votre index.html:

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

Ou si vous utilisez Webpack, vous pouvez installer le module Intl avec NPM:

npm install --save intl

Et ajoutez ces importations à votre application:

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

Il existe une solution rapide à cela. Ajouter

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

dans votre fichier index.html avant le <script src="cordova.js"></script> entrée.

Voir cette réponse github https://github.com/angular/angular/issues/3333#issuecomment-2033279

11
Stevo

Ou une autre solution serait d'écrire ces tuyaux vous-même. Pour la date, par exemple, vous pouvez utiliser moment.js, ou voici un exemple pour le canal monétaire:

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

Ce tuyau transforme la monnaie. Le tuyau pour cent fonctionnerait presque de la même manière. L'expression régulière filtre tous les chiffres, y compris le point pour les nombres flottants.

1
Highriser

Voici ce que j'ai fait avec RC3. Je pense que cela fonctionnera aussi avec RC4.

Créez un tuyau en tapant ionic g pipe pipe-transform

Nettoyez le code pour supprimer @Injectable. Aussi, utilisez camel case pour le nommer comme ci-dessous. Implémentez 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 + '%';
  }
}

Dans votre app.module ajouter à declarations tableau.

Ensuite, dans le html, utilisez-le comme dans l'exemple d'utilisation ci-dessus. Voici mon exemple

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

Notez que j'utilise aussi un * ngIf et une directive de surbrillance au cas où quelqu'un aurait besoin d'aide supplémentaire. Pas nécessaire évidemment.

Resulting image

0
Mukus