调用 Firebase 数据库 child() 在 Javascript 中返回“未定义”

Question

这就是我所拥有的

Firebase 数据库：

setores: {
    -KkBgUmX6BEeVyrudlfK: {
        id: '-KkBgUmX6BEeVyrudlfK',
        nome: 'test'
    }
    -KkDYxfwka8YM6uFOWpH: {
        id: '-KkDYxfwka8YM6uFOWpH',
        nome: 'test1'
    }
}

JavaScript

var setorRef = firebase.database().ref().child("setores");
/* DELETE ROW */
$("#tbody_setores").on('click','.delete-btn', function(e){
    var $row = $(this).closest('tr'),
       rowId = $row.data('id');

    var rowId = $row.data('id');
    //it should remove the firebase object in here
    setorRef.child(rowId).remove()
    .then(function() {
      //after firebase confirmation, remove table row
      $row.remove();
    })
    .catch(function(error) {
      console.log('Synchronization failed');
    });  
});

setorRef.on("child_changed", snap => {

  var setorKey = snap.child("id").val();
  var nome = snap.child("nome").val();

  $("#tbody_setores").append("<tr data-id'"+setorKey+">"+
                                "<td class='mdl-data-table__cell--non-numeric'>" + nome + "</td>" +
                                "<td class='mdl-data-table__cell--non-numeric'>"+
                                  "<div buttons>"+
                                    "<button class='delete-btn mdl-button mdl-js-button mdl-button--icon mdl-button--colored'><i class='material-icons'>delete</i></button>"+" "+
                                  "</div>"+
                                "</td>"+
                              "</tr>");
});

现在，我想用这段代码做的是：当我点击附加在表格上的删除按钮时，它应该删除数据库中的行和相应的对象。我在另一个表 (here) 上使用了相同的代码，它工作得很好，但是在这个表上，rowId 正在返回 undefined 而不是 id。

Answer 1

看起来您的 HTML 中有几个 错字（在 data-id 属性中）：

$("#tbody_setores").append("<tr data-id'"+setorKey+">"+

应该是这样的：

$("#tbody_setores").append("<tr data-id='"+setorKey+"'>"+ 

这可以很好地解释为什么 rowId 返回 undefined 而不是 id ;)