Еще одна проблема после обновления AngularFire 0.5.0: расчет возвращает NaN.
-
22-12-2019 - |
Вопрос
Я все больше разочаровываюсь в angularFire 0.5.0, потому что уже ничего не работает корректно.После того, как с вашей помощью мне удалось исправить удаление одного элемента, я столкнулся с другой проблемой.
Каждый отдельный товар состоит из даты, описания и цены.До обновления я смог подсчитать сумму всех цен и вернуть ее на страницу.Теперь там просто написано NaN или Null.Я уже пытался понять, почему, но оба значения (earning.price, $scope.totalEarning) в расчете являются числами.Я этого не понимаю.Новый угловой огонь что-нибудь дает?Я пытаюсь это исправить уже некоторое время и просто не могу.Я был бы прав, если бы кто-нибудь мог это понять.Наверное, я просто этого не вижу, и это довольно глупая проблема.
Посмотрите это на plunkr: http://embed.plnkr.co/jb1iWOcjcm0alFchmzOH/preview
Вот код:
$scope.addEarning = function() {
$scope.earnings.$add({date:$scope.FormEarningDate, description:$scope.FormEarningDescription, price:$scope.FormEarningPrice});
$scope.FormEarningDate = '';
$scope.FormEarningDescription = '';
$scope.FormEarningPrice = '';
$scope.updateEarning();
}
$scope.updateEarning = function() {
$scope.totalEarning = 0;
angular.forEach($scope.earnings, function (earning) {
price = parseFloat(earning.price)
$scope.totalEarning += price;
$log.log(typeof $scope.totalEarning);
})
$scope.totalBalance = $scope.totalEarning - $scope.totalCost;
}
И HTML:
<form for="Profit" class="form-inline" style="margin-bottom: 20px" ng-submit="addEarning()">
<div class="form-group">
<div class="col-sm-3">
<input type="date" name="idate" ng-model="FormEarningDate" class="form-control" id="idate" placeholder="Date">
</div>
<div class="col-sm-5">
<input type="text" name="idesc" ng-model="FormEarningDescription" required class="form-control" id="idesc" placeholder="Description">
</div>
<div class="col-sm-2">
<input type="text" name="iprice" ng-model="FormEarningPrice" required class="form-control" id="iprice" placeholder="Amount">
</div>
</div>
<tr ng-repeat="earning in earnings | orderByPriority | orderBy : 'date'">
<td>{{earning.date}}</td>
<td>{{earning.description}}</td>
<td>{{earning.price}} €</td>
<td><button class="btn btn-danger" ng-click="earnings.$remove(earning.$id)">Löschen</button></td>
</tr>
<tr>
<td colspan="2"></td>
<td><strong>Total:</strong> {{totalEarning}} €</td>
<td></td>
</tr>
Решение
Обновленный ответ
Есть несколько вещей, которые вы делаете неправильно.Как указано в моем исходном ответе, вам нужно перебирать ключи Firebase, а не сам объект Firebase.Кроме того, вам необходимо убедиться, что все обновления происходят после обновления Firebase (через $on('change', ...)
обработчик событий) и в течение жизненного цикла AngularJS (выполнено ниже с помощью $timeout
).
var app = angular.module('balance', ['firebase']);
app.controller('BalanceCtrl', function($scope, $log, $http, $timeout, $firebase) {
$scope.earnings = $firebase(new Firebase('https://dgdemo.firebaseio.com/Earnings'));
$scope.totalBalance = 'Nothing yet.';
$scope.totalEarning = 0;
$scope.totalCost = 0;
$scope.updateEarning = function() {
$scope.totalEarning = 0;
angular.forEach($scope.earnings.$getIndex(), function (id) {
var earning = $scope.earnings[id];
$scope.totalEarning += parseFloat(earning.price);
});
$scope.totalBalance = $scope.totalEarning - $scope.totalCost;
};
// Ensure any call to updateCallback will execute within the AngularJS lifecycle.
var updateCallback = angular.bind(null, $timeout, $scope.updateEarning);
$scope.addEarning = function() {
var earning = $scope.earnings.$add({
date: $scope.FormEarningDate,
description: $scope.FormEarningDescription,
price: $scope.FormEarningPrice
});
$scope.FormEarningDate = '';
$scope.FormEarningDescription = '';
$scope.FormEarningPrice = '';
};
$scope.earnings.$on('change', updateCallback);
});
Оригинальный ответ
Это потому что angular.forEach
перебирает все свойства $scope.earnings
объект (который является объектом Firebase).Что вы хотите сделать, так это перебрать отдельные элементы.
$scope.updateEarning = function() {
$scope.totalEarning = 0;
angular.forEach($scope.earnings.$getIndex(), function (id) {
var earning = $scope.earnings[id];
$scope.totalEarning += parseFloat(earning.price);
});
$scope.totalBalance = $scope.totalEarning - $scope.totalCost;
}