我的循环仅在我的视图中显示最后一个数据值 - firebase答案

【问题标题】：My loop is only displaying the last data value in my view - firebase我的循环仅在我的视图中显示最后一个数据值 - firebase
【发布时间】：2017-09-12 04:49:37
【问题描述】：

我正在尝试显示我使用 angular.foreach 从 firebase 数据库中检索到的所有设备列表，但是当我尝试在视图中显示检索到的值时，它只显示最后一个值。需要帮助！

我的 JS

/*global angular*/
var app = angular.module('sdt', ['ngRoute', 'firebase']);

app.config(['$routeProvider', function ($routeProvider) {
    'use strict';
    $routeProvider.when('/sdt', {
        templateUrl: 'searchdowntime/sdt.html',
        controller: 'sdtCtrl'
    });
}]);

app.controller('sdtCtrl', ['$scope', '$firebaseObject', '$firebaseArray', function ($scope, $firebaseObject, $firebaseArray) {
    'use strict';

    var ref = firebase.database().ref();
        var data = ref.child("data");
        var list = $firebaseArray(data);

        list.$loaded().then(function(data) {
            $scope.data = data;
            angular.forEach ($scope.data , function (d) {
                angular.forEach (d.equipments, function (e) {
                    $scope.allEquipments = e;
                    console.log($scope.allEquipments);
                })
            });
            console.log($scope.data);
        }).catch(function(error) {
            $scope.error = error;
        });




}]);

我的 html

<div class="table-responsive">
  <table class="table table-striped table-hover">
     <tr>
        <th id="system">System</th>
        <th id="equipment">Equipment</th>
        <th id="date">Date</th>
        <th id="type">Type</th>
     </tr>
     <tr data-ng-repeat="d in allEquipments">
        <td headers = "system">System</td>
        <td headers = "equipment" >{{d}}</td>
        <td headers = "date">date</td>
        <td headers = "type">Standby</td>
     </tr>
  </table>

控制台日志：

查看：

【问题讨论】：

标签： html angularjs firebase firebase-realtime-database

【解决方案1】：

这是因为您总是在每次迭代中更改 $scope.allEquipments 的值。您需要将其推送到数组中。

app.controller('sdtCtrl', ['$scope', '$firebaseObject', '$firebaseArray', function ($scope, $firebaseObject, $firebaseArray) {
    'use strict';

    // Add this line
    $scope.allEquipments = [];
    var ref = firebase.database().ref();
        var data = ref.child("data");
        var list = $firebaseArray(data);

        list.$loaded().then(function(data) {
            $scope.data = data;
            angular.forEach ($scope.data , function (d) {
                angular.forEach (d.equipments, function (e) {
                    // Change this line
                    $scope.allEquipments.push(e);
                    console.log($scope.allEquipments);
                })
            });
            console.log($scope.data);
        }).catch(function(error) {
            $scope.error = error;
        });
}]);

还有你的ng-repeat 到

 <tr data-ng-repeat="d in allEquipments">
    <td headers = "system">System</td>
    <td headers = "equipment" >{{d.equipment}}</td>
    <td headers = "date">date</td>
    <td headers = "type">Standby</td>
 </tr>

【讨论】：

谢谢。