Tôi đang viết một ứng dụng web nhỏ Angular và đã gặp sự cố khi tải dữ liệu. Tôi đang sử dụng Firebase làm nguồn dữ liệu và tìm thấy dự án AngularFire nghe hay. Tuy nhiên, tôi gặp sự cố khi kiểm soát cách dữ liệu đang được hiển thị.angularfireCollection: biết khi nào dữ liệu được tải đầy đủ
Lúc đầu, tôi đã cố gắng sử dụng đồng bộ ngầm thường xuyên bằng cách thực hiện:
angularFire(ref, $scope, 'items');
Nó hoạt động tốt và tất cả các dữ liệu được hiển thị khi tôi sử dụng mô hình $ items trong quan điểm của tôi. Tuy nhiên, khi dữ liệu đến từ nguồn dữ liệu Firebase, nó không được định dạng theo cách mà khung nhìn hỗ trợ, vì vậy tôi cần thực hiện một số thay đổi cấu trúc bổ sung cho dữ liệu trước khi dữ liệu được hiển thị. Vấn đề là, tôi sẽ không biết khi nào dữ liệu đã được tải đầy đủ. Tôi đã thử gán một đồng hồ $ cho $ item, nhưng nó được gọi là quá sớm.
Vì vậy, tôi chuyển vào và cố gắng sử dụng angularfireCollection thay vì:
$scope.items = angularFireCollection(new Firebase(url), optionalCallbackOnInitialLoad);
Các tài liệu không phải là khá rõ ràng những gì mà "optionalCallbackOnInitialLoad" làm và khi nó được gọi, nhưng cố gắng để truy cập vào mục đầu tiên trong bộ sưu tập $ items sẽ ném một lỗi ("Uncaught TypeError: Không thể đọc thuộc tính '0' của undefined").
Tôi đã cố gắng thêm một nút và trong handler click của nút tôi đăng nội dung của mục đầu tiên trong $ items, và nó làm việc :
console.log($scope.items[0]);
Có nó được! Đối tượng đầu tiên từ Firebase của tôi được hiển thị mà không có bất kỳ lỗi nào ... chỉ có vấn đề là tôi phải bấm vào một nút để đến đó.
Vì vậy, không ai biết làm thế nào tôi có thể biết khi tất cả các dữ liệu đã được nạp và sau đó gán nó vào một phạm vi biến $ sẽ được hiển thị theo quan điểm của tôi không? Hoặc là có một cách khác?
điều khiển của tôi:
app.controller('MyController', ['$scope', 'angularFireCollection',
function MyController($scope, angularFireCollection) {
$scope.start = function()
{
var ref = new Firebase('https://url.firebaseio.com/days');
console.log("start");
console.log("before load?");
$scope.items = angularFireCollection(ref, function()
{
console.log("loaded?");
console.log($scope.items[0]); //undefined
});
console.log("start() out");
};
$scope.start();
//wait for changes
$scope.$watch('items', function() {
console.log("items watch");
console.log($scope.items[0]); //undefined
});
$scope.testData = function()
{
console.log($scope.items[0].properties); //not undefined
};
}
]);
Quan điểm của tôi:
<button ng-click="testData()">Is the data loaded yet?</button>
Cảm ơn trước!
thử điều này: angularFireCollection (ref, function (data) { $ scope.items = dữ liệu; console.log ($ phạm vi. các mục [0]); }); –