在模板中使用日期、百分比和货币管道时遇到同样的问题——</p>
例如,我正在使用一个简单的百分比管道:
{{ .0237| percent:'1.2-2' }}
它在 Chrome 上运行时可以工作,但是当我部署到 iOS 设备时,它会抛出此错误:
“例外:ReferenceError:找不到变量:Intl in [{{ {{ .0237| percent:'1.2-2' }} ...”
有没有其他人遇到过这个问题?任何建议或帮助将不胜感激!谢谢!
在模板中使用日期、百分比和货币管道时遇到同样的问题——</p>
例如,我正在使用一个简单的百分比管道:
{{ .0237| percent:'1.2-2' }}
它在 Chrome 上运行时可以工作,但是当我部署到 iOS 设备时,它会抛出此错误:
“例外:ReferenceError:找不到变量:Intl in [{{ {{ .0237| percent:'1.2-2' }} ...”
有没有其他人遇到过这个问题?任何建议或帮助将不胜感激!谢谢!
那是因为它依赖于内部化 API,目前并非在所有浏览器中都可用(例如在 iOS 浏览器上不可用)。
请参阅兼容性表。
这是一个已知问题(beta.1)。
您可以尝试对 Intl 使用 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';
对此有一个快速修复。添加
<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
或者另一种解决方案是自己编写这些管道。例如,对于日期,您可以使用 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;
}
}
这个管道正在改变货币。百分比管道的工作方式几乎相同。正则表达式正在过滤所有数字,包括浮点数的点。
这是我对 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 和 highlight 指令,以防有人需要额外帮助。显然没有必要。