使用 AngularFire v2 获取关键值有点清晰？

Question

很抱歉这篇文章太长了，但这让我有点抓狂：

假设我想在加载时获取项目的“标题”和“.priority”键值。

首先让我们看看每个东西是如何布置的：

 $scope.items = $firebase(new Firebase("https://****.firebaseio.com"));

 $scope.items.$on('loaded', function() { 

console.log($scope.items);

});

我们得到：

> Object {$bind: function, $add: function, $save: function, $set: function, $remove: function…}
    > $add: function (item, cb) {
    > $bind: function (scope, name) {
    > $child: function (key) {
    > $getIndex: function () {
    > $on: function (type, callback) {
    > $remove: function (key) {
    > $save: function (key) {
    > $set: function (newValue) {

    > this is my item: Object
          $$hashKey: "012"
          $id: "this is my item"
          $priority: 2884707
          title: "this is the title of my item"
          __proto__: Object


    > __proto__: Object

看起来不错，让我们尝试获取 $priority：

 console.log($scope.items.$child('$priority'));

哎呀：

Uncaught Error: Firebase.child failed: First argument was an invalid path: "$priority". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

好的，我们现在先跳过它，试试标题：

console.log($scope.items.$child('title'));

> Object {$bind: function, $add: function, $save: function, $set: function, $remove: function…}
    > $add: function (item, cb) {
    > $bind: function (scope, name) {
    > $child: function (key) {
    > $getIndex: function () {
    > $on: function (type, callback) {
    > $remove: function (key) {
    > $save: function (key) {
    > $set: function (newValue) {
    > __proto__: Object

没有标题。

好的，让我们换一种方式试试吧：

    var firstItem = $scope.items.$getIndex()[0];  //returns $ids in order of priority
     console.log($scope.items.$child(firstItem));

     > Object {$bind: function, $add: function, $save: function, $set: function, $remove: function…}
         > $add: function (item, cb) {
         > $bind: function (scope, name) {
         > $child: function (key) {
         > $getIndex: function () {
         > $on: function (type, callback) {
         > $remove: function (key) {
         > $save: function (key) {
         > $set: function (newValue) {
              title: "this is the title of my item"
         > __proto__: Object

但是现在没有优先级了！

厨房水槽对着电脑发誓：

 console.log($scope.items.title);

     > undefined

 console.log($scope.items[0].title);

     > Uncaught TypeError: Cannot read property 'title' of undefined 

  console.log(Object.keys($scope.items));     

     > ["$bind", "$add", "$save", "$set", "$remove", "$child", "$on", "$getIndex"]

我错过了什么？我可以通过掉头来获得“标题”，（使用“$getIndex()”找出项目的 $id 是什么，抓住第 n 个项目，然后使用“$child()”进行另一个调用)，但即使这样也不适用于 $priority。有没有更简单的方法从 AngularFire v2 中获取关键值？或者有什么方法可以获得 $priority？

Answer 1

我相信我/正在经历同样的问题。希望这与您的经历有关。即：

$scope.items = $firebase(new Firebase("https://xxxxxx.firebaseio.com"));
$scope.items.$on('loaded', function() {
  console.log($scope.items['some key']); // this writes undefined to console
});

我注意到的是，如果我不依赖 loaded 事件，这实际上确实有效。例如在 HTML 中：

<a href="#" data-ng-click="logItem()">click me</a>

在 JS 中：

$scope.items = $firebase(new Firebase("https://xxxxxx.firebaseio.com"));
$scope.logItem = function() {
  console.log($scope.items['some key']); // this works
}

单击“单击我”链接按预期将我的项目记录到控制台。

感觉loaded 时间的集合没有完全填充来自 firebase 的基础项目。

Answer 2

$child 方法只能用于创建新 AngularFire 引用。调用$child 与调用$firebase(new Firebase(parentULR + "/childName")) 相同。在您的示例中，如果您要做的只是获取给定对象的 $priority 和 title，您可以简单地执行以下操作：

$scope.items = $firebase(new Firebase("https://****.firebaseio.com"));
$scope.items.$on('loaded', function() {
  var item = $scope.items['your-item-id'];
  console.log(item['$priority']);
  console.log(item.title);
});

如果您不知道您的项目的 ID，您可以遍历 $scope.items 对象以找到它。

Answer 3

正如您所指出的，您的示例有些零散，也没有可以使用的数据结构示例。所以很难对你想要完成的事情有一个清晰的了解。我将在下面对所有这些事情做出一些假设，然后相应地提供一个工作示例。如果这不能回答问题，也许它会帮助我们深入挖掘并找到您正在寻找的确切用例。

首先，假设我们在 kato.firebaseio.com/users 上有一个用户列表，每个用户都是一个像这样的对象：

/users/:id/name
/users/:id/email
/users/:id/favorite_dessert

现在，假设我想使用以下 angularCode 使这些工作：

<ul>
  <li ng-repeat="user in users">{{user.name}} really likes {{user.favorite_dessert}}</li>
</ul>

在我的控制器中，我可以这样写：

var fbRef = new Firebase('https://kato.firebaseio.com/users');
$scope.users = $firebase( fbRef );

现在它们会自动出现在我的 HTML 代码中。

现在，假设当其中一个用户被点击时，我想获得一个双向绑定，可以像这样编辑它：

<form ng-controller="EditUserController">
      <input ng-model="user.name" type="text" />
      <input ng-model="user.email" type="text" />
      <input ng-model="user.favorite_dessert" type="text" />
</form>

在EditUserController里面我可以得到用户如下：

var fbRef = new Firebase('https://kato.firebaseio.com/users/'+user_id);
$firebase( fbRef ).$bind($scope, 'user');

或者我可以像这样使用$child（纯粹是为了演示$child的用法，没有必要）：

var fbRef = new Firebase('https://kato.firebaseio.com/users');
// $child gives a new $firebase object! not a ref to a hash key!
$firebase( fbRef ).$child( user_id ).$bind($scope, 'user');

如果我想在我的控制器中以编程方式访问这些数据，我可以这样做：

var fbRef = new Firebase('https://kato.firebaseio.com/users');
var usersRef = $firebase( fbRef );
var userId = 'kato';
usersRef.$on('loaded', function() {
   if( usersRef.hasOwnProperty(userId) ) {
      // note that we just grab it by key; not $child!
      var userRecord = usersRef[userId]; 
      console.log(userId + ' was found, name is ' + userRecord.name + ' and priority is ' + userRecord['$priority']);
   }

});