ios - pro - ionic tutorial

Ionic 2, utilizando Angular 2 Pipe breaks en iOS- "No se puede encontrar la variable: Intl"

Question

Experimentando el mismo problema con la fecha, el porcentaje y los tubos de moneda cuando los usa en una plantilla:

Por ejemplo, estoy usando un tubo de porcentaje simple:

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

Funciona cuando se ejecuta en Chrome, pero cuando despliego a un dispositivo iOS, arroja este error:

"EXCEPCIÓN: ReferenceError: no se puede encontrar la variable: Intl en [{{{{.0237 | percent: ''1.2-2''}} ..."

¿Alguien más se ha encontrado con este problema? ¡Cualquier sugerencia o ayuda sería muy apreciada! ¡Gracias!

Answer 1

Esto es lo que hice con RC3. Creo que también funcionará con RC4.

Crea una tubería escribiendo ionic g pipe pipe-transform

Limpie el código para eliminar @Injectable . Además, use camel-case para nombrarlo como a continuación. Implementar 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 + ''%'';
}
}

En su app.module agregue a la matriz de declarations .

Luego, en el html, utilícelo como en el ejemplo de uso anterior. Aquí está mi ejemplo

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

Tenga en cuenta que estoy usando una directiva * ngIf y una destacada también en caso de que alguien necesite ayuda adicional. No es necesario obviamente

Answer 2

Esto se debe a que depende de la API de internalización, que actualmente no está disponible en todos los navegadores (por ejemplo, no en el navegador iOS).

Ver la tabla de compatibilidad .

Este es un problema conocido (beta.1).

Puede intentar usar un polyfill para Intl .

Para hacerlo, puede usar la versión de CDN y agregar esto a su index.html:

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

O si usa Webpack, puede instalar el módulo Intl con NPM:

npm install --save intl

Y agrega estas importaciones a tu aplicación:

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

Answer 3

Hay una solución rápida para esto. Añadir

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

a su archivo index.html antes de la entrada <script src="cordova.js"></script> .

Ver esta respuesta github https://github.com/angular/angular/issues/3333#issuecomment-203327903

Answer 4

Otra solución sería escribir esas tuberías tú mismo. Para la fecha, por ejemplo, puede usar moment.js, o aquí hay un ejemplo para la moneda:

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

Esta tubería está transformando la moneda. El porcentaje de tubería funcionaría casi de la misma manera. La expresión regular está filtrando todos los dígitos, incluido el punto de los números flotantes.