Question

我遵循一个教程，该教程展示了如何使用分页功能制作聊天应用，但出于某种原因，负责Prev页面和下一页分页按钮的代码无法按预期工作。

这是Plunker中的应用程序：

http://embed.plnkr.co/zxp9wcKaMcfM2U0vAJhG/preview

每次单击“下一步”按钮时，都应该从第一个按钮开始查看Firebase消息对象中的下一条消息。请记住，我在messages对象中有28条消息。因此，当您单击“下一步”按钮一次时，您将看到预期的下10条消息，但是当您再次单击它时，消息列表将变为空白。

所以当我尝试手动调试时，我决定运行console.log(lastItem.name)，因为这似乎是让这个功能起作用的关键参数。因此，您可以在控制台中看到，第一次单击“下一步”时，您会看到记录的-JX7ZlaB0QTa0Z47eu28 Firebase ID。这是有道理的，因为它是前10页中最后一个消息对象的名称/ ID，它们在页面加载时返回到页面。再次单击“下一步”时，我们希望看到类似的消息对象名称/ ID，但我们只看到记录到控制台的字符串messages。

所以看起来pageNext函数正在跳跃数据树，从单个消息对象到整个消息对象。然后当我们再次按下Next时，我们会看到此错误

TypeError: Cannot read property 'name' of undefined
    at h.$scope.pageNext (http://run.plnkr.co/plunks/zxp9wcKaMcfM2U0vAJhG/main.js:32:24)

所以看起来它跳转到数据树的根，我猜它什么都没包含。知道为什么会这样，以及如何解决它？

Answer 1

您的邮件只有user和text属性。

在您收到错误的pageNext和pageBack方法中，您收到了最后一条消息并尝试读取不存在的name属性

我猜你打算从上一条消息中读到user？

Answer 2

在您的pageNext和pageBack方法中，您指的是错误的快照。

当我解决这个问题时，它就会起作用：

messageRef.startAt(null, name).limit(numberOfItems).once('value', function(snapshot) {
    snapshot.forEach(function(snapItem) {
        var itemVal = snapItem.val();
        itemVal.name = snapItem.name(); // was snapshot.name()
        messages.push(itemVal);
    });
    deferred.resolve(messages);
});

AngularJS＆amp; Firebase应用程序分页功能无法正常工作

2 个答案: