javascript - 如何获取要更改的Ionic 3上的火力 list ？

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

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

当我使用'child_changed'时，它根本不会显示该列表，因为似乎没有使用'child_changed'来检索该列表。

请建议在ionic 3上检索火力清单的正确方法，该火力清单在检测到变化时会更新。

下面是我的脚本；

  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;
  }

最佳答案

节点更改后，将触发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中对其进行更新”。这种思维方式称为反应式编程，是在许多现代Web技术上构建应用程序的关键。