离子2，在iOS上使用Angular 2pipe道中断 – “找不到variables：Intl”

在模板中使用date，百分比和货币pipe道时，遇到同样的问题 –

例如，我正在使用一个简单的百分比pipe道：

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

它在Chrome上运行，但是当我部署到一个iOS设备，它会引发这个错误：

“EXCEPTION：ReferenceError：找不到variables：Intl in [{{{.0237 | percent：'1.2-2'}} …”

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

Answer 1

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

请参阅兼容性表 。

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

你可以尝试使用一个polyfill国际 。

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

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

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

 npm install --save intl 

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

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

Answer 2

有一个快速解决这个问题。 加

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

到<script src="cordova.js"></script>的index.html文件。

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

Answer 3

或者另一种解决scheme是自己写这些pipe道。 例如，对于date，您可以使用moment.js，或者这是货币pipe道的示例：

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

这个pipe道正在改变货币。 百分比pipe道将以几乎相同的方式工作。 正则expression式将过滤包括浮点数在内的所有数字。

Answer 4

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

通过inputionic g pipe pipe-transform来创build一个pipe道

清理代码以删除@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和一个高亮指令，以防有人需要额外的帮助。 不是很明显。