Angular 8 异步管道内存使用率高并使 chrome 崩溃

Question

在 Angular 8 发布后，我在 Angular 和 Firebase 中使用异步管道时遇到了问题。我不知道为什么会这样，这真的很困扰我。

我有我的类别服务：

    public getAllCategories(): Observable<Category[]> {
    return this.afs.collection<Category>(`categories`).valueChanges();
  }

然后我的组件使用该服务，如下所示：

    export class AttributesComponent implements OnInit {
  form: FormGroup;
  count = 0;

  constructor(
    private fb: FormBuilder,
    private attributesService: AttributesService,
    public categoryService: CategoryService
  ) {
    this.form = this.fb.group({
      attributeArray: this.fb.array([])
    });
  }......etc......

最后，在我的 HTML 中，我有一个异步管道调用公共 CategoryService 和函数：

{{ categoryService.getAllCategories() | async | json }}

我不明白为什么这不起作用，服务正在返回正确的可观察值，并且异步应该显示它。没有给出任何错误，chrome 刚刚开始使用 Gigs 内存，我的计算机风扇开始转动，我被迫杀死 chrome。

关于我做错了什么有什么想法吗？？？

非常感谢！

Answer 1

我认为那是因为你是getAllCategories()从视图本身调用的，

这会导致返回连续的 Observable，这对于任何浏览器来说都很难处理...;) 考虑在Component视图中调用 then中的服务方法

allCatageries :any;

...
ngOnInit() {
   this.allCatageries = categoryService.getAllCategories();
}
...

然后在视图中

{{ allCatageries  | async | json }}

希望这可以帮助... ：）