代码:
<ion-col col-6 *ngFor="let item of items;">
<ion-card>
<div class="image_area">
</div>
<ion-card-content>
<ion-card-title class="capitalize">
{{item.English_name.toLowerCase()}}
</ion-card-title>
<ion-grid>
<ion-row>
<ion-col>
<h4>Rate</h4>
<P>{{ parseFloat(item.Rate).toFixed(2) }}</P>
</ion-col>
<ion-col>
<h4>MRP</h4>
<P>{{ parseFloat(item.MRP_rate).toFixed(2) }}</P>
</ion-col>
</ion-row>
</ion-grid>
<button ion-button full color="primary">Add to cart</button>
</ion-card-content>
</ion-card>
</ion-col>
任何人都可以告诉我为什么parseFloat不起作用如何使其可行?我正在使用ngFor loop,所以在控制器中做parseFloat和toDixed是个坏主意。
你能试试下面的代码吗
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ (item.Rate).toFixed(2) }}<br/>
{{ (item.MRP_rate).toFixed(2) }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
$scope.item = { Rate: 12.1233,MRP_rate: 52.12222}
});
</script>
</body>
</html>
问题是你不能只从模板中调用你想要的任何函数。
只能调用在组件上声明的函数。
因此,2个解决方案:
-
计算组件中的费率和物料需求计划,例如:
items = items.map((i: any) => ({...i, parsed_rate: parseFloat(i.Rate).toFixed(2), parsed_MRP: parseFloat(i.MRP_rate).toFixed(2)}));
稍后在模板中使用 {{ item.parsed_rate }} 和 {{ item.parsed_MRP }}。
-
在组件中定义一个解析函数(您也可以使用管道(并从模板调用它
parseRateAndMRP(s: String) { return parseFloat(s).toFixed(2); }
稍后使用 {{ parseRateAndMRP(item.Rate( }} 和 {{ parseRateAndMRP(item.模板中的 MRP_rate( }}
app.controller('myCtrl', function($scope) {
$scope.item = { Rate: 12.1233,MRP_rate: 52.12222}
$scope.itemtoparse = parseFloat($scope.item.rate).toFixed(2)
}
{{itemtoparse}}
尝试提交到界面之前执行此操作
在控制器内完成