Ionic 2, используя Angular 2 Разрывы труб на iOS- "Невозможно найти переменную: Intl"

Испытывая ту же проблему с датами, процентами и валютными каналами при использовании их в шаблоне -

Например, я использую простой процентный канал:

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

Он работает при работе в Chrome, но когда я развертываю устройство iOS, оно вызывает эту ошибку:

"EXCEPTION: ReferenceError: не удается найти переменную: Intl in [{{{..0237 | percent: '1.2-2'}}..."

Кто-нибудь еще сталкивается с этой проблемой? Любые предложения или помощь будут очень благодарны! Спасибо!

Ответы

Ответ 1

Это связано с тем, что он использует API интернализации, который в настоящее время недоступен во всех браузерах (например, не в браузере iOS).

См. таблицу совместимости .

Это известная проблема (beta.1).

Вы можете попробовать использовать polyfill для Intl.

Чтобы сделать это, вы можете использовать версию CDN и добавить это в свой index.html:

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

Или, если вы используете Webpack, вы можете установить Intl-модуль с NPM:

npm install --save intl

И добавьте эти импорт в свое приложение:

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

Ответ 2

Для этого есть быстрое решение. Добавить

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

в файл index.html перед записью <script src="cordova.js"></script>.

См. этот ответ github https://github.com/angular/angular/issues/3333#issuecomment-203327903

Ответ 3

Или другое решение будет писать эти трубы самостоятельно. Например, для даты вы можете использовать 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;
    }
}

Эта труба преобразует валюту. Процентная труба будет работать почти так же. Регулярное выражение фильтрует все цифры, включая точку для чисел с плавающей запятой.

Ответ 4

Вот что я сделал с 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 и директиву выделения тоже, если кому-то нужна дополнительная помощь. Не обязательно очевидно.

Результирующее изображение