当对象包含 ng-repetate 时，如何使用 angularFire 保存 Firebase 对象 $asArray() [英] How to save Firebase objects $asArray() with angularFire, when the objects contain ng-repetate

问题描述

我最近从 angularfire 0.6 切换到 0.8.0.我在保存包含数组本身的列表项时遇到问题.

I recently switched from angularfire 0.6 to to 0.8.0. I am having problems to save an item of a list, that contains an array itself.

我的对象帐户如下所示:

{
  "-JQruasomekeys0nrXxH" : {
    "created" : "2014-03-23T22:00:10.176Z",
    "durations" : [ {
      "$$hashKey": "00L", // this is generated by ng-repeat on arrays
      "end" : "2014-07-15T22:00:00.000Z",
      "start" : "2014-07-09T22:00:00.000Z"
    } ],
    "email" : "[e-mail]",
  }
}

持续时间是一组包含开始和结束的时间段，类似于 HTML 中两个输入字段的 ng-repeat.

The durations are an array of time periods with start and end, which are resembled by a ng-repeat of two input fields in HTML.

<tr ng-repeat="duration in account.durations">
  <td>
     <input ng-model="duration.start" datepicker>
  </td>
  <td>
     <input ng-model="duration.end" datepicker>
  </td>
</tr>

在将帐户保存到 firebase 之前，我正在 Controller 中执行 angular.copy($scope.account)，以摆脱 angular $$hash 值.这适用于 angularfire 0.6.0.

在 angularfire 0.8.0 中，我仍然收到错误:

In angularfire 0.8.0, I am still getting the error:

错误:Firebase.set 失败:第一个参数包含无效键($$hashKey) 在属性durations.0"中.键必须是非空字符串并且不能包含."、#"、$"、/"、["或]

Error: Firebase.set failed: First argument contains an invalid key ($$hashKey) in property 'durations.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]

当处理对象时，angularfire 如何解决这个问题，这些对象内部有数组?持续时间不会是我在帐户中拥有的唯一数组.那么有没有更专业的解决方案，或者我是否必须在通过 angularfire 保存到 firebase 之前 angular.copy 每个数组对象?

How is this meant to be solved by angularfire, when working with objects, that have arrays within themselves? Durations won't be the only array I will have within the account. So is there a more professional solution, or do i have to angular.copy every single array object before saving to firebase via angularfire?

提前感谢您的任何提示.

Thanks in advance for any hint.

更新(8 月 14 日 11 日)经过更多研究，问题不在于使用 angular.copy() 不再起作用.实际上确实如此.但是使用 angularfire 方法 $save() (https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebaseobject-save) 因为我似乎找不到执行 angular.copy() 后 $save() 项目的正确方法.

Update (11. Aug 14) After doing a bit more research, the Problem is not that using angular.copy() does not work any more. actually it does. But it is very unhandy to update/modify an existing dataset with the angularfire method $save() (https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebaseobject-save) Because I can't seem to find a proper way to $save() an item after doing angular.copy().

更新 2(14 年 8 月 12 日)我暂时找到了一种解决方法，但实际上我首先想避免一种解决方法:

Update 2 (12 Aug 14) I found a workaround for the moment, but actually a workaround is what I wanted to avoid in the first place:

// loop for every duration, that should clean the object from "$$hashKey" attributes
angular.forEach($scope.account.durations, function (value, index) {
  var cleanValue = {};

  // checks, if the date is a JSON string already
  if (typeof value.start === 'string') {
    cleanValue.start = value.start;
  } else {
    cleanValue.start = value.start.toJSON();
  }

  // checks, if the date is a JSON string already
  if (typeof value.end === 'string') {
    cleanValue.end = value.end;
  } else {
    cleanValue.end = value.end.toJSON();
  }

  // overwrite the array object at index to get loose of $$hashKey
  $scope.account.durations[index] = cleanValue;
});

我认为这种解决方法利用了 Firebase 中基于文档的原则的优势，因为在通过 AngularFire 存储对象之前，我必须知道对象的确切属性.

I think that this workaround takes the advantages off the document based principle in Firebase, as I have to know the exact attributes of an object before storing it via AngularFire.

更新 3(14 年 8 月 13 日)我添加了一个 jsfiddle 来显示问题:jsfiddle.net/1fem6byt

Update 3 (13. AUg 14) I added a jsfiddle to show the problem: jsfiddle.net/1fem6byt

如果您向数组添加行，然后尝试将对象保存到 firebase，则控制台中会出现 $$hashKey 错误(如上所示).有一些方法可以解决这个问题，但如果可能的话，我正在寻找一种更简单或更干净的 angularfire 解决方案.我可能没有正确添加行 - 或者我错过了什么?

If you add lines to the array, and then try and save the object to the firebase, the $$hashKey error (given above) appears in the console. There are ways to workaround this problem, but I am looking for an easier, or cleaner solution with angularfire, if possible. I might not do adding of lines correctly – or do I miss something?

推荐答案

当然最好的方法是在 firebase 中解决它，比如 @Kato 提到并实时绑定到数组中的数据到视图中，您应该通过 $asArray 实例使用额外的 firebase 同步对象.

Of course the best way to solve it in firebase like @Kato mentioned and have the real time binding to data from array into view you should use an extra firebase synchronized object through the $asArray instance.

喜欢这个解决方案:http://jsfiddle.net/RaVbaker/sb00kor8/1/ 但是您将失去使用 Save to Firebase 之类的按钮按需"保存数据的可能性.在 firebase 数组对象发生更改后，它们将立即保存.但它也会为您提供跨页面数据的灵活性和同步性.

Like in this solution: http://jsfiddle.net/RaVbaker/sb00kor8/1/ But you will loose then possibility to save data "on demand" with button like Save to Firebase. They will be saved instantly after change in firebase array object occurs. But it will also give you flexibility and synchronization of data across pages.

但在您的情况下，其他更容易的是更改 angular 在 ng-repeat 指令中跟踪对象唯一性的方式.这可以通过在 ng-repeat 语句的末尾设置 track by $index 来完成.

But other and much easier in your case is to change the way angular tracks uniqueness of objects in ng-repeat directive. It can be done by setting track by $index in the end of ng-repeat statement.

将 ng-repeat="duration in account.durations" 更改为:

 ng-repeat="duration in account.durations track by $index"

您的 jsfiddle 更新了此解决方案:http://jsfiddle.net/RaVbaker/sb00kor8/2/

Your jsfiddle updated with this solution: http://jsfiddle.net/RaVbaker/sb00kor8/2/

有关 ngRepeat 的 track by 的更多信息，您可以明显地找到 在官方文档中.

More info about track by for ngRepeat you can find obviously in official documentation.

希望我有所帮助.

这篇关于当对象包含 ng-repetate 时，如何使用 angularFire 保存 Firebase 对象 $asArray()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！