javascript - 从 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
  });
};

但是在控制台中显示了这个错误:

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

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

知道我做错了什么吗？

我已经设置了 Plunker over here 。任何对我做错的事情的帮助都会受到赞赏。

Answer 1

从您的 Angular 来看，相关的 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: undefined

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

所以解决办法是:

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

更新

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

ReferenceError: snapshotVal is not defined

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

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