Ein weiteres Problem nach dem AngularFire 0.5.0-Update – die Berechnung gibt NaN zurück

Question

Vom AngularFire 0.5.0 bin ich immer mehr enttäuscht, da nichts mehr richtig funktioniert.Nachdem ich mithilfe Ihrer Hilfe das Entfernen eines einzelnen Elements beheben konnte, bin ich auf ein anderes Problem gestoßen.

Jeder einzelne Artikel besteht aus einem Datum, einer Beschreibung und einem Preis.Vor dem Update konnte ich die Summe aller Preise berechnen und auf der Seite zurückgeben.Jetzt steht nur noch NaN oder Null.Ich habe bereits versucht herauszufinden, warum, aber beide Werte (earning.price, $scope.totalEarning) in der Berechnung sind Zahlen.Ich verstehe es nicht.Bringt das neue Eckfeuer etwas?Ich versuche schon seit einiger Zeit, das Problem zu beheben, aber es gelingt mir einfach nicht.Ich würde es wirklich tun, wenn es jemand herausfinden könnte.Wahrscheinlich sehe ich es einfach nicht und es ist ein ziemlich dummes Problem.

Sehen Sie es auf plunkr: http://embed.plnkr.co/jb1iWOcjcm0alFchmzOH/preview

Hier ist der Code:

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

Und der HTML-Code:

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

Answer 1

Aktualisierte Antwort

Es gibt mehrere Dinge, die Sie falsch machen.Wie in meiner ursprünglichen Antwort angegeben, müssen Sie die Schlüssel von Firebase durchlaufen, nicht das Firebase-Objekt selbst.Darüber hinaus müssen Sie sicherstellen, dass alle Aktualisierungen nach der Aktualisierung von Firebase erfolgen (über eine $on('change', ...) Event-Handler) und innerhalb des AngularJS-Lebenszyklus (durchgeführt unten mit $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);
});

Ursprüngliche Antwort

Das ist weil angular.forEach iteriert über alle Eigenschaften von $scope.earnings Objekt (das ein Firebase-Objekt ist).Sie möchten die einzelnen Elemente durchlaufen.

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