Firebase 删除节点数组减慢组件渲染速度答案

【问题标题】：Firebase Delete node array slow down the component renderingFirebase 删除节点数组减慢组件渲染速度
【发布时间】：2019-09-28 03:51:35
【问题描述】：

我有一个 Angular7 组件，它连接到 Firebase 中的实时数据库。

组件绑定到一个结构化项目数组调用“信号”，每次向数组添加新项目时，组件都会获得更新。

一切正常。

问题来自于数组被清除的时候... 在这种情况下，实时数据库似乎会一个一个地删除数组项，并且对于删除的每个项，它都会继续将整个数组推送到组件...

这是代码：

绑定部分

ngOnInit() {

    this.db.list<RHSignal>('signals', ref => ref).valueChanges().subscribe(res => {      
      this.listSignal = res;
    })  
  }

删除数组的函数

ClearSignals(){
    this.db.object('signals').remove();
    alert('Signals has been removed !!!');
  }

如您所见，“信号”节点（可以包含 200 多个结构化项目）通过一个命令被删除，但绑定继续发送删除的每个数组项目的数据。

这会导致页面变得非常缓慢或被阻塞。

我需要一种更快更好的方法来避免这个问题。

感谢支持

【问题讨论】：

您是否尝试在列表订阅中使用去抖时间？
我以前从未听说过...你能解释一下Dogancan吗？
如果问题是您的组件在短时间内需要进行如此多的更新，您可以告诉您的 observable 等待一段时间以稳定（去抖动）。你可以说喜欢，使用 1 个值，等待 500 毫秒（去抖动）使用下一个值等。你可以点击链接 learnrxjs.io/operators/filtering/debouncetime.html

标签： angular typescript firebase firebase-realtime-database angularfire2

【解决方案1】：

终于找到了解决办法：

通过此链接阅读官方文档后：

https://firebase.google.com/docs/database/web/read-and-write

我发现：

删除数据

删除数据最简单的方法是在引用上调用 remove() 该数据的位置。

您也可以通过指定 null 作为另一个写入的值来删除操作，例如 set() 或 update()。您可以将此技术与 update() 在单个 API 调用中删除多个子节点。

所以我这样改了Clear方法：

  ClearSignals(){

    var updates = {};

    updates['/signals'] = {};

    this.db.database.ref().update(updates);
    alert('Signals has been removed !!!');
  }

现在真的很快！

【讨论】：