Ionic 2，在iOS上使用Angular 2 Pipe break-“无法找到变量：Intl”

Experiencing the same problem with the date, percent, and currency pipes when using them in a template—

在模板中使用日期，百分比和货币管道时遇到同样的问题 -

For example, I'm using a simple percent pipe:

例如，我使用的是简单的百分比管道：

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

It works when running on Chrome, but when I deploy to an iOS device, it throws this error:

它在Chrome上运行时有效，但是当我部署到iOS设备时，它会抛出此错误：

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

“EXCEPTION：ReferenceError：无法找到变量：[{{{{{{{{{{{{{{{{{{{{{{} {

Has anyone else run into this problem? Any suggestions or help would be greatly appreciated! Thanks!

有没有其他人遇到这个问题？任何建议或帮助将不胜感激！谢谢！

4 个解决方案

#1

That's because it relies on the internalization API, which is not currently available in all browsers (for example not on iOS browser).

这是因为它依赖于内部化API，目前并非在所有浏览器中都可用（例如，不在iOS浏览器上）。

See the compatibility table.

请参阅兼容性表。

This is a known issue (beta.1).

这是一个已知问题（beta.1）。

You can try to use a polyfill for Intl.

您可以尝试将填充物用于Intl。

To do so, you can use the CDN version, and add this to your index.html:

为此，您可以使用CDN版本，并将其添加到index.html：

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

Or if you use Webpack, you can install the Intl module with NPM:

或者，如果您使用Webpack，则可以使用NPM安装Intl模块：

npm install --save intl

And add these imports to your app:

并将这些导入添加到您的应用中：

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

#2

There is a quick fix for this. Add

有一个快速解决方案。加

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

to your index.html file before the <script src="cordova.js"></script> entry.

到

See this github answer https://github.com/angular/angular/issues/3333#issuecomment-203327903

看到这个github答案https://github.com/angular/angular/issues/3333#issuecomment-203327903

#3

Or another solution would be writing those pipes yourself. For the date, for example, you can use moment.js, or here is an example for the currency pipe:

或者另一种解决方案是自己编写这些管道。例如，对于日期，您可以使用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;
    }
}

This pipe is transforming the currency. The percent pipe would work nearly the same way. The regex is filtering all digits including the point for float numbers.

这个管道正在改变货币。百分比管道的工作方式几乎相同。正则表达式过滤所有数字，包括浮点数的点。

#4

Here's what I did with RC3. I think it will work with RC4 too.

这是我用RC3做的。我认为它也适用于RC4。

Create a pipe by typing ionic g pipe pipe-transform

通过键入ionic g pipe pipe-transform创建管道

Clean the code to remove @Injectable. Also, use camel-case to name it like below. Implement PipeTransform.

清理代码以删除@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 + '%';
  }
}

In your app.module add to declarations array.

在你的app.module中添加声明数组。

Then in the html use it like in the example usage above. Here's my example

然后在html中使用它就像上面的示例用法一样。这是我的例子

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

Notice I'm using an *ngIf and a highlight directive too in case someone needs extra help. Not necessary obviously.

请注意，如果有人需要额外帮助，我也会使用* ngIf和高亮指令。显然没有必要。

#1