无法访问要传递给删除函数的正确 Firebase 项键

Cannot access proper firebase item key to pass to delete function

本文关键字：函数 项键 Firebase 删除 访问      更新时间：2023-09-26

Firebase有一个棘手的问题。我正在尝试访问 firebase 为每个收集项自动生成的长格式 ID（例如 -JgnIsMlTLaPuDMEtQP2）以传递给我的删除函数。我之前让它在不同的角度应用程序中工作，如下所示：

.HTML 

    <tbody ng-repeat="(key,employee) in employees">
        <tr>
            <td>{{employee.employeeName}}</td>
            <td>{{employee.employeeAge}}</td>
            <td>{{key}}</td> // the key param appeared perfectly in this case
            <td>
            <button class="btn btn-danger" 
                ng-click="deleteEmployee(key, employee.employeeName)">
                delete <span class="glyphicon glyphicon-remove"></span>
            </button>
            </td>
        </tr>
    </tbody>

爪哇语

    $scope.deleteEmployee = function(key,name) {
      // get ref to db collectionvar employeeRef = new Firebase("https://xxxxxxx.firebaseio.com/Employees");
      // append item key to the path and run remove method
      var newRef = employeeRef.child(key);
      newRef.remove();
      // confirm delete
      alert(name + " has been deleted");    
    }

上面的代码接收格式正确的键并完美地删除该项 - 这会立即反映在视图中。

但是，我正在使用其他应用程序尝试它，并且键值被设置为增量索引（例如。0,1,2,3,4...），因此当传递给删除函数时它不起作用。这是新代码。

.HTML

<div class="row">
    <ul id="messages" ng-show="messages.length">
        <li ng-repeat="(key, message) in messages | reverse">{{message.text}}
            <small>{{key}}</small> // WRONG VALUE DISPLAYED HERE
            <button class="btn btn-xs btn-danger" ng-click="delMessage(key)" label="Remove">Delete</button>
        </li>
    </ul>
</div>

爪哇语

//delete message 
$scope.delMessage = function(messageKey) {
  var messageRef = new Firebase('https://xxxxxx.firebaseio-demo.com/messages/');
      // append item key to the path and run remove method
  var messageRef = messageRef.child(messageKey);
  if( messageRef ) {
    messageRef.remove();
    console.log("DEL: " + messageRef); // this logs the endpoint with index number 
    console.log("Message removed successfully!");
  } else {
    console.log("uh oh...problem!");
  }
};

登录到控制台时 messageRef 的格式为 

https://xxxxxx.firebaseio-demo.com/messages/2

而是应该是 

https://xxxxxx.firebaseio-demo.com/messages/-JgnIsMlTLaPuDMEtQP2

我已经尝试了我能找到的所有组合来让它工作，但到目前为止没有任何修复它。我不确定为什么它会在第一段代码中工作，而不是在第二段代码中起作用。我唯一可以补充的是，无法正常工作的应用程序是通过终端中的firebase工具创建的，而工作应用程序只是一些带有Firebase螺栓的角度代码。我也尝试将 remove（） 更改为 $remove 但这会引发未定义的方法错误。我完全被难住了。任何帮助将不胜感激。

按照Frankvan的建议，我从angularFire快速入门文档中获取了一个片段，它允许我简单地将当前选定的消息直接传递给angularFire的$remove方法，而无需传递特定的消息ID。

  <li ng-repeat="message in messages">
      .......
    <!-- delete message -->
    <button ng-click="messages.$remove(message)">X</button>
  </li>

即使这有效，我也想添加一些额外的代码并将 JS 与 HTML 进一步分离。我决定在角度控制器中设置一个自定义函数来处理它，并从 ng-click 调用此函数。

以下代码的工作方式与上述完全相同，但添加了提示，让用户在调用$remove之前确认删除。

.HTML：

<button ng-click="deleteMessage(message)">x</button>

角度功能：

 // delete a specific message 
$scope.deleteMessage = function(message) {
  var msg = JSON.stringify(message.text);
  if(message) {
    var confirm = window.confirm("Are you sure you want to delete: " + msg + "?");
    if(confirm == true) {
      $scope.messages.$remove(message).then(function(){
        alert("Message " + msg + " has been deleted!");
        console.log("Message was removed successfully from firebase!");
      });
    }
  } else {
    console.log("Sorry, there was a problem deleting the message.!");
  }
};

我在我的一个项目中对这个问题进行了一段时间的打击。关键是使用 Angular Fire 的 $loaded 方法等待对象填充，然后再调用 $remove 方法，因为这些调用是异步的。

https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebasearray-loaded

相关文章：