角型铸造不起作用答案

【问题标题】：Angular type casting not working角型铸造不起作用
【发布时间】：2018-03-21 04:39:29
【问题描述】：

代码：

<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 循环，所以在控制器中执行 parseFloat 和 toDixed 是个坏主意。

【问题讨论】：

标签： angular ionic2

【解决方案1】：

你可以试试下面的代码

<!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>

【讨论】：

正确，但根据我的理解，插值逻辑即使在 Angular 1.0 或 Angular 2.0 中也是相同的。如有不同请指正

【解决方案2】：

问题是你不能从模板中调用任何你想要的函数。

您只能调用在组件上声明的函数。

所以，2 个解决方案：

计算组件中的费率和 MRP，如：

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

【讨论】：

【解决方案3】：

app.controller('myCtrl', function($scope) {

    $scope.item = { Rate: 12.1233,MRP_rate: 52.12222}

    $scope.itemtoparse =  parseFloat($scope.item.rate).toFixed(2)
}

{{itemtoparse}} 在尝试提交到界面之前执行此操作

在控制器内进行

【讨论】：

在控制器内执行
据我所知，你不应该在这个{{}}中进行任何计算