从 Firebase 更新项目

Question

我正在研究如何更新存储在我的 Firebase 中的项目。我已经设法让它达到我可以创建和删除项目的地步。我现在想编辑和更新现有项目。我的项目在页面上重复出现，每个项目旁边都有一个“编辑”按钮。

HTML

<form>
  <input type="text" placeholder="Enter title here" ng-model="editedProvider.title">
  <button type="submit" ng-click="updateProvider(provider.name)">Submit</button>
</form>

我正在将项目添加到我的列表中，如下所示：

JS

$scope.newProvider = {};
$scope.providers = [];

providersRef.on('child_added', function(snapshot) {
  $timeout(function() {
    var snapshotVal = snapshot.val();
    $scope.providers.push({
      title: snapshotVal.title,
      name: snapshot.name()
    });
  });
});

// Create Item
$scope.createProvider = function() {
  var newProvider = {
    title: $scope.title,
  };
  providersRef.push(newProvider);
};

我不知道如何更新此项目。我有一个如下所示的更新提供程序函数：

$scope.updateProvider = function(name) {
  providersRef.child(name).update({
    title: snapshotVal.title
  });
};

但这会在控制台中显示此错误：

错误：Firebase.child 失败：第一个参数是无效路径：“未定义”。路径必须是非空字符串，并且不能包含“.”、“#”、“$”、“[”或“]”

我尝试创建一个函数来查找使用 snapshot.name() 来检查它与我正在编辑的项目，以使用新值更新 title，但它似乎不起作用。

知道我做错了什么吗？

我已经设置了Plunker over here。感谢您对我做错的任何帮助。

Answer 1

您认为相关的 HTML 是这样的：

  <div ng-show="shouldShowEditing()">
    <h3>Editing {{ editedProvider.title }}</h3>
    <form role="form" name="addPlaceForm">
      <div class="form-group">
        <input type="text" placeholder="Enter title here" ng-model="editedProvider.title">
      </div>

      <div class="form-group">
        <button type="submit" class="btn btn-primary btn-lg" ng-click="updateProvider(provider.name)">Submit</button>
      </div>
    </form>
    <button type="button" class="btn btn-default" ng-click="cancelEditing();">Cancel</button>
  </div>

相关代码是这样的：

$scope.updateProvider = function(name) {
  console.log('updateProvider: '+name);
  providersRef.child(name).update({
    title: snapshotVal.title
  });
};

我添加了该 console.log 语句，因为它很容易向您显示出了什么问题。输出是：

updateProvider：未定义

因此，您可以看到您没有正确传递提供者的名称。有了这些知识，您可以返回 HTML 并看到您在其中引用了provider.name，该表单的其余部分引用了editedProvider。

所以解决方法是：

<button type="submit" class="btn btn-primary btn-lg" ng-click="updateProvider(editedProvider.name)">Submit</button>

更新

名称传递问题解决后，下一条错误消息是：

ReferenceError: snapshotVal 未定义

这也很清楚：您的 updateProvider 代码看起来是从 Firebase 侦听器之一复制/粘贴的，并且引用了一个不存在的 snapshotVal。相反，它应该从 Angular 范围内获取新标题：

$scope.updateProvider = function(name) {
  providersRef.child(name).update({
    title: $scope.editedProvider.title
  });
};