如何导航从 AngularFire 返回的对象? [英] How to navigate object returned from AngularFire?

问题描述

当我运行以下 Firebase 查询时:

 var ref = new Firebase('https://.firebaseio.com/companies/endo/status');数据 = $firebaseObject(ref);控制台.目录(数据)；

我得到以下对象:

d$$conf: 对象$id:状态"$优先级:空活跃，不招募:39批准上市:1已完成:339邀请报名人数:10尚未招募:23招聘人数:128暂停:3已终止:38未知数:74撤回:15__proto__:对象

我试图访问值为 339 的Completed"元素.但是，console.log(data['Completed']) 返回 undefined.怎么了?

解决方案

$firebaseObject 开始时是一个空对象，但是当数据从 Firebase 数据库下载后，它会填充对象.

起初，您看不到任何内容，因为数据尚未下载.您的 console.log() 在 $firebaseObject 创建后运行一纳秒.数据在几毫秒后下载.

所以您可能会问，如果数据一开始不存在，我该如何处理?

您可以做的是将 $firebaseObject 附加到 $scope.然后将其绑定到您的模板中.当数据下载时，Angular $digest 循环会运行，并刷新您的模板.

你的控制器看起来像这样:

app.controller('MyCtrl', function($scope, $firebaseObject) {var ref = new Firebase('https://.firebaseio.com/companies/endo/status');$scope.data = $firebaseObject(ref);});

您的模板如下所示:

你做到了吗?{{ data.Completed }}

还有一种方法，需要更多的设置，但这是我个人的最爱.您也可以使用路由器将数据解析到控制器中.

angular.module('app', ['firebase']).constant('FirebaseUrl', '<my-firebase-app>').service('rootRef', ['FirebaseUrl', Firebase]).controller('MyCtrl', MyController).config(ApplicationConfig);函数 ApplicationConfig($routeProvider) {$routeProvider.when('/', {控制器:'MyCtrl',模板:'view.html'，解决: {数据:函数($firebaseObject，rootRef){var ref = rootRef.child('companies/endo/status');//对下载数据的承诺返回 $firebaseObject(ref).$loaded();}}});}函数 MyController($scope, data) {$scope.data = 数据；控制台日志(数据.完成)；//会起作用，因为数据已下载}

When I run the following Firebase query:

    var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status');
    data = $firebaseObject(ref);
    console.dir(data);

I get the following object:

d
$$conf: Object
$id: "status"
$priority: null
Active, not recruiting: 39
Approved for marketing: 1
Completed: 339
Enrolling by invitation: 10
Not yet recruiting: 23
Recruiting: 128
Suspended: 3
Terminated: 38
Unknown: 74
Withdrawn: 15
__proto__: Object

I am trying to access the "Completed" element with value 339. However, console.log(data['Completed']) returns undefined. What is wrong?

解决方案

A $firebaseObject starts out as an empty object, but when the data has been downloaded from the Firebase database, it then populates the object.

At first, you don't see anything because the data hasn't downloaded yet. Your console.log() runs a nanosecond after the $firebaseObject is created. The data is downloaded milliseconds after.

So you're probably asking, How do I handle the data if it doesn't exist at first?

What you can do is attach the $firebaseObject to $scope. And then bind it in your template. When the data downloads the Angular $digest loop runs, and refreshes your template.

Your controller would look like this:

app.controller('MyCtrl', function($scope, $firebaseObject) {
   var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status');
   $scope.data = $firebaseObject(ref);
});

Your template would look like this:

<div>Did you do it? {{ data.Completed }}</div>

There is another way, which takes a bit more setup, but it's my personal favorite. You can also use the router to resolve the data into the controller.

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController)
  .config(ApplicationConfig);

function ApplicationConfig($routeProvider) {
   $routeProvider.when('/', {
      controller: 'MyCtrl',
      template: 'view.html',
      resolve: { 
        data: function ($firebaseObject, rootRef) {
          var ref = rootRef.child('companies/endo/status');
           // a promise for the downloaded data
          return $firebaseObject(ref).$loaded();
        }
      }
   });
}

function MyController($scope, data) {
  $scope.data = data;
  console.log(data.Completed); // will work because the data is downloaded
}

这篇关于如何导航从 AngularFire 返回的对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！