tl; dr 不要将异步管道与函数调用一起使用.这是昂贵且长期运行的操作，可能会破坏用户体验，或者导致您的浏览器崩溃:您可以自己管理可观察对象，而不是使用易于使用 async 管道进行操作.

tl;dr Don't use the async pipe with function calls. This is expensive and long-running and can destroy the user experience or in your case crash your browser: Manage your observables yourself and not with the easy to use async pipe.

如果您仍想将 async 管道与功能一起使用，则可以尝试使用

If you still want to use the async pipe with a function, you can try using the ChangeDetectionStrategy.OnPush. This comes with other downsides, such as running the change detection manually, e.g. with this.cdr.detectChanges(); and cdr being of type ChangeDetectorRef.

请注意Angulars Lifecycle系统的工作原理.

Please be aware of how Angulars Lifecycle system works.

由于评估的函数值没有内部引用(Angular用于检查值是否已更改或需要更新)，因此生命周期挂钩 ngOnChanges 将不会对其进行检查，但是而不是 ngDoCheck ，它可以运行很多次.

Since evaluated function values do not have an internal reference (which Angular uses to check whether values have changed or need to be updated), they won't be checked by the lifecycle hook ngOnChanges, but rather with ngDoCheck, which runs a lot of times.

这对于管道尤为严重，而对于异步管道则尤为严重.如果我们称您使用 async 管道昂贵且运行时间长，Angular指出:

This is especially bad with pipes, and the worst with the async pipe. If we call your usage of async pipes expensive and long running, Angular states, that:

昂贵且运行时间长的管道可能会破坏用户体验

An expensive and long-running pipe could destroy the user experience

或者您的情况导致浏览器崩溃.

or in your case crash the browser.

请找到

Please find this blog post for further explanation.