Question

这是我的代码：

export class MyComponent implements OnInit {
   dataB: any[] = [];
   ngOnInit() {
     this._myService.DataSource$.subscribe(dataA => {
       this.dataB = [];
       console.log('length of dataB (before): ' + this.dataB.length);
       dataA.forEach(da => {
         var newData = {
           id: 0,
           name: da.name,
           verifyMethod: '',
           notes: ''
         };
         this.dataB.push(newData);
       }
       console.log('length of dataB (after): ' + this.dataB.length);
     });
   }
}

_myService.DataSources$已在应用程序的其他位置订阅，因此在此组件中，它总是通过subscribe方法运行两次，奇怪的是，即使我重置，this.dataB仍在增长将其移至subscribe方法顶部的空数组（注意：每次只有8个dataA项），打印出的两个console.log如下所示：

length of dataB (before): 0
length of dataB (after): 8
length of dataB (before): 0
length of dataB (after): 16

我的目标是在每次有新的dataB可用时重新创建dataA的数组，但看起来它会不断生成重复项，同时还会产生多个并发的_myService.DataSource$订阅调用该应用程序！每次使用subscription方法时，如何才能可靠地重置this.dataB？

Answer 1

您需要取消订阅可观察项，以防止加载更多数据和内存泄漏。

最简单的方法是使用ngrx take运算符，最终代码看起来像什么。

ngOnInit() {
 this._myService.DataSource$
 .pipe(take(1)) // <==== note this part it will take only one value and unsubscribe then
 .subscribe(dataA => {
   this.dataB = [];
   console.log('length of dataB (before): ' + this.dataB.length);
   dataA.forEach(da => {
     var newData = {
       id: 0,
       name: da.name,
       verifyMethod: '',
       notes: ''
     };
     this.dataB.push(newData);
   }
   console.log('length of dataB (after): ' + this.dataB.length);
 });
}

希望这可以解决您的问题。

无法清除Observable订阅方法中的数组组件变量

1 个答案: