如何从Firebase同步获取来自AngularFire集合的单个记录 [英] How can I get a single record from AngularFire collection synchronized from Firebase

问题描述

我无法从AngularFire同步数组中获取单个记录。

这是我的服务：


$ b

app.factory（Projects，[$ firebaseArray，function（$ firebaseArray）{
//创建一个对Firebase的引用，我们将存储数据
var ref = new Firebase（https://XXXXXXXXXX.firebaseio.com）;
var childRef = ref.child（'projects'）;
var projects = $ firebaseArray（childRef）;
$ b $ return
all：projects
$ b create：function（projects）{
return projects。$ add（project）;
} ，
get：function（projectId）{
console.log（projectId）;
projects。$ loaded（）。then（function（x）{
var project = x。 $ getRecord（projectId）;
console.log（project）; // This print null
）。catch（function（error）{
console.log（Error：，error ）;
}）;
}，
delete：function（project）{
return projects。$ remove（project）;
}
};
}
]）;


这是我的控制器：

 $ scope.project = Projects.get（$（$ {code $ app.controller（'ProjectViewCtrl'，function） routeParams.projectId）; 
}）; 
  

这是我的观点：

 < div> 
< p> {{project.creatorUID}}< / p> 
< p>项目ID：{{project。$ id}}< / p> 
< / div> 
 
< a class =btn buttonng-href =＃！/>返回信息中心< / a> 
  

我可以把路由的细节项目拉到最大，但是我看不到任何内容或数据。

解决方案

从语义上讲，这个服务创建一个API，返回 $ firebaseArray 。根本不需要这项服务，因为它不提供额外的功能，也不会抽象任何复杂性。它可以很容易地减少到：

$ pre $ $ $ c $ app $（$） /创建一个Firebase的引用，我们将存储我们的数据
var ref = new Firebase（https://XXXXXXXXXX.firebaseio.com）.child（'projects'）;
return $ firebaseArray （ref）;
}）;

由于这些方法已经在内部调用了$ add，$ delete等等， callee来代替包装方法。

继续讨论通过键找到特定记录的问题，可以使用 $ getRecord 方法在数组上。然而，最有可能的是，这不是你正在寻找的。您在这里没有提供用例，这对于我们如何处理您的预期设计非常有限（参见 XY问题），但是你的代码建议你只需要一个记录而不是数组。这应该使用 $ firebaseObject 来完成，而不是尝试同步列表，然后从列表中提取单个项目：

  app.factory（'Record'，function（$ firebaseObject）{
 var baseRef = new Firebase（'...'）。child（'projects'）; 
 return function（recordId）{
 return $ firebaseObject（baseRef.child（recordId））; 
} 
}）; 
  

现在可以简单地获取代表任何记录的同步对象，例如：

  app.controller（'...'，function（Record）{
 var rec =记录（'foobar123'）; 
 }）; 
  

另一个常见的用例是创建一个列表，在其中单击一个项目，然后编辑并将其保存回Firebase（即某种可编辑的网格/列表视图）。这已经可以在数组中已经没有任何不自然和重复的内容同步的情况下完成了：

 < ul> 
< li ng-repeat =rec in list> 
 {{rec。$ id}}：{{rec.name}} 
 < / li> 
< / ul> 
 
< form ng-show =selectedRec> 
< input ng-model =selectedRec.field
 ng-change =list。$ save（selectedRec）/> 
< / form> 
  

和控制器：

  $ scope.list = $ firebaseArray（...）; 
 $ scope.pickItem = function（rec）{
 $ scope.selectedRec = rec; 
}; 
  

I am having trouble getting a single record from an AngularFire synchronized array.

This is my service:

app.factory("Projects", ["$firebaseArray", function($firebaseArray) {
    // create a reference to the Firebase where we will store our data
    var ref = new Firebase("https://XXXXXXXXXX.firebaseio.com");
    var childRef = ref.child('projects');
    var projects = $firebaseArray(childRef);

    return {
        all: projects,

        create: function (projects) {
            return projects.$add(project);
        },
        get: function (projectId) {
            console.log(projectId);
            projects.$loaded().then(function(x) {
                var project = x.$getRecord(projectId);
                console.log(project); // This print null
            }).catch(function(error) {
                console.log("Error:", error);
            });
        },
        delete: function (project) {
            return projects.$remove(project);
        }
    };
  }
]);

This is my controller:

app.controller('ProjectViewCtrl', function ($scope, $routeParams, Projects, Auth) {
    $scope.project = Projects.get($routeParams.projectId);
});

This is my view:

<div>
 <p>{{project.creatorUID}}</p>
 <p>Project ID: {{project.$id}}</p>
</div>

<a class="btn button" ng-href="#!/">Back to Dashboard</a>

I can pull up the detail project as far as the routing but I am not able to see any content or data.

解决方案

Semantically speaking, this service creates an API that returns the same methods already available on $firebaseArray. There's really no need for this service at all as it provides no additional functionality and does not abstract any complexity. It could easily be reduced to:

app.factory("Projects", function($firebaseArray) {
    // create a reference to the Firebase where we will store our data
    var ref = new Firebase("https://XXXXXXXXXX.firebaseio.com").child('projects');
    return $firebaseArray(ref);
});

Since the methods already call $add, $delete, et al internally, those can be used by the callee in place of the wrapping methods.

Moving on to the question about finding a specific record by key, this can be done using the $getRecord method on the array. Most likely, however, this isn't what you're looking for. You haven't provided the use case here, which is pretty limiting for how well we can address your intended design (see XY problem), but your code suggests you just want one record and not the array. This should be done using $firebaseObject rather than trying to synchronize a list and then extract a single item from the list:

app.factory('Record', function($firebaseObject) {
   var baseRef = new Firebase('...').child('projects');
   return function(recordId) {
      return $firebaseObject(baseRef.child(recordId));
   }
});

Now one can simply fetch the synchronized object representing any record like so:

app.controller('...', function(Record) {
   var rec = Record( 'foobar123' );
});

Another common use case is creating a list where you click an item, and then edit the contents for that specific item, and save them back to Firebase (i.e. some sort of editable grid/list view). That can already be done without any unnatural and duplicate synchronization of content already in the array:

<ul>
  <li ng-repeat="rec in list">
     {{rec.$id}}: {{rec.name}}
     <button ng-click="pickItem(rec)">select</button>
  </li>
</ul>

<form ng-show="selectedRec">
  <input ng-model="selectedRec.field" 
         ng-change="list.$save(selectedRec)" />
</form>

And the controller:

$scope.list = $firebaseArray(...);
$scope.pickItem = function(rec) {
  $scope.selectedRec = rec;
};

这篇关于如何从Firebase同步获取来自AngularFire集合的单个记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！