ionica 2, Usare angolari 2 pause tubo sul iOS- "Impossibile trovare variabile: Intl"

Question

con lo stesso problema con la data, per cento, e tubi di valuta quando li utilizzano in un template-

Ad esempio, io sto usando un semplice tubo per cento:

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

funziona quando in esecuzione su Chrome, ma quando ho distribuire ad un dispositivo iOS, getta questo errore:

"EXCEPTION: ReferenceError: Can't find variable: Intl in [{{ {{ .0237| percent:'1.2-2' }} ..."

Qualcun altro ha eseguito in questo problema? Qualsiasi suggerimento o aiuto sarà molto apprezzato! Grazie!

Answer 1

Questo perché si basa sull'API di internalizzazione, che non è attualmente disponibile in tutti i browser (ad esempio non sul browser iOS).

Vedere compatibility table.

Questo è un known issue (beta.1).

È possibile provare a utilizzare uno polyfill for Intl.

Per fare ciò, è possibile utilizzare la versione CDN, e aggiungere questo al vostro index.html:

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

Oppure, se si utilizza Webpack, è possibile installare il modulo Intl con NPM:

npm install --save intl 

E aggiungere queste importazioni la vostra applicazione:

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

Answer 2

C'è una soluzione rapida per questo. Aggiungi

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

al file index.html prima della voce <script src="cordova.js"></script>.

Vai a questa risposta github https://github.com/angular/angular/issues/3333#issuecomment-203327903

Answer 3

o un'altra soluzione avrebbe scritto quei tubi da soli. Per la data, ad esempio, è possibile utilizzare moment.js, o qui è un esempio per il tubo di valuta:

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

Questo tubo sta trasformando la valuta. La pipa percentuale funzionerebbe quasi allo stesso modo. Il regex sta filtrando tutte le cifre compreso il punto per i numeri float.

Answer 4

Ecco cosa ho fatto con RC3. Penso che funzionerà anche con RC4.

creare una pipe digitando ionic g pipe pipe-transform

Pulire il codice per rimuovere @Injectable. Inoltre, usa il cammello per nominarlo come sotto. Implementare 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 + '%'; 
    } 
} 

Nella tua app.module aggiungi al declarations array.

Quindi nel html utilizzarlo come nell'esempio precedente. Ecco il mio esempio

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

Avviso sto usando un ngIf * e una direttiva highlight anche nel caso in cui qualcuno ha bisogno di aiuto supplementare. Non necessario, ovviamente.