هناك مشكلة أخرى بعد تحديث AngularFire 0.5.0 - حيث تُرجع العملية الحسابية NaN

Question

أشعر بخيبة أمل متزايدة بشأن 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>

Answer 1

الإجابة المحدثة

هناك العديد من الأشياء التي تقوم بها بشكل غير صحيح.كما هو مذكور في إجابتي الأصلية، تحتاج إلى التكرار على المفاتيح من 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;
}