javascript - 如何检索 ionic 3 上的 firebase 列表，该列表会在发生更改时更新？

Question

我有一个项目列表，我希望在添加新项目以及更新现有项目时更新该列表。

通过使用“child_added”检索列表，在添加新项目后，新项目将立即添加到列表中，但是当我修改现有项目时，项目上的更改不会反射(reflect)在列表中。

当我使用“child_changed”时，它根本不会显示列表，因为似乎未使用“child_changed”检索列表。

请告知在 ionic 3 上检索 Firebase 列表的正确方法，该列表将在检测到更改时更新。

下面是我的脚本；

  getItems(category: string){
    let items: Item [] = [];
    var itemRef = firebase.database().ref('items/'+category);

    itemRef.on('child_added', function(data) {
      items.push({
        item_id: data.key,
        name: data.val().name,
        color: data.val().color,
        description: data.val().description
      });
    });

    itemRef.on('child_changed', function(data){
      //not sure what to do here
    });

    return items;
  }

Answer 1

当节点发生更改时，会触发 child_changed 事件。此时，您需要在数组中找到旧数据并将其替换为新数据:

let items: Item [] = [];
var itemRef = firebase.database().ref('items/'+category);

itemRef.on('child_added', function(data) {
  items.push({
    item_id: data.key,
    name: data.val().name,
    color: data.val().color,
    description: data.val().description
  });
  // TODO: add the item to the UI
});

itemRef.on('child_changed', function(data){
  items.forEach(function(item, i) {
    if (item.item_id === data.key) {
      items[i] = {
        item_id: data.key,
        name: data.val().name,
        color: data.val().color,
        description: data.val().description
      };
    }
  })
  // TODO: update the item in the UI
});

请注意，我删除了此代码周围的 getItems() 函数。您无法从 Firebase 中获取项目并从函数中返回它们。相反，您应该将问题视为“开始从 Firebase 加载项目。每当添加新项目时，将其添加到 UI。每当更新项目时，在 UI 中更新它。”这种思维方式称为响应式(Reactive)编程，是在许多现代网络技术上构建应用程序的关键。