1 退订时发生错误

Question

当我每秒调用一个请求时，我会收到此错误：

core.js:5967 ERROR TypeError: Cannot read property 'remove' of null

在 LoadingBackdropService.hide (loading-backdrop.service.ts:18)

在 TapSubscriber._tapNext (payment.component.ts:57)

在 TapSubscriber._next (tap.js:40)

在 TapSubscriber.next (Subscriber.js:49)

在 SwitchMapSubscriber.notifyNext (switchMap.js:70)

在 InnerSubscriber._next (InnerSubscriber.js:11)

在 InnerSubscriber.next (Subscriber.js:49)

在 MapSubscriber._next (map.js:35)

在 MapSubscriber.next (Subscriber.js:49)

在 FilterSubscriber._next (filter.js:33)

如何纠正错误？

ts：

      ngUnsubscribe: Subscription;
    
      ngOnInit() {
        this.load();
      }
    
      load() {
        this.loadingBackdrop.show();
        this.ngUnsubscribe = timer(0, 1000).pipe(
          switchMap(() => this._object.get(this.card.card_id)
            .pipe(finalize(() => this.loadingBackdrop.hide())))
        ).subscribe(data => this.dataSource = new MatTableDataSource(data));
      }
    
      ngOnDestroy() {
        if (this.ngUnsubscribe !== undefined) {
          this.ngUnsubscribe.unsubscribe();
        }
      }

加载背景.service.ts：

  show() {
    const backdropWrapperElement = this.createLoadingBackdropTemplate();
    const bodyElement = document.querySelector('body');
    bodyElement.appendChild(backdropWrapperElement);
  }

  hide() {
    const backdropWrapperElement = document.querySelector('#loadingBackdrop');
    backdropWrapperElement.remove();
  }

  private createLoadingBackdropTemplate(): HTMLDivElement {
    const element = document.createElement('div');
    element.setAttribute('id', 'loadingBackdrop');
    element.setAttribute('style', `
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      z-index: 999;
    `);
    element.innerHTML = `
      <div class="backdrop"></div>
      <div class="spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    `;
    return element;
  }

Answer 1

错误的根源似乎来自这一行

.pipe(finalize(() => this.loadingBackdrop.hide()))) 

特别是在 hide 方法内部，确保 loadingBackdrop 对象被正确实例化。

Answer 2

一个简单的解决方案是使用takeUntil 运算符

import { Subject } from 'rxjs'
import { takeUntil, tap } from 'rxjs/operators'
  destroyed$ = new Subject();
  ngOnInit() {
    this.load();
  }

  load() {
    this.loadingBackdrop.show();
    timer(0, 1000).pipe(
      switchMap(() => this._object.get(this.card.card_id)),
      tap(() => this.loadingBackdrop.hide()),
      takeUntil(this.destroyed$)
    ).subscribe(data => this.dataSource = new MatTableDataSource(data));
  }

  ngOnDestroy() {
    this.destroyed$.next()
  }

这个想法是，只要destroyed$ 未被触发，那么Observable 流将处于活动状态，但一旦destroyed$ Observable 不为空，angular 将自动取消订阅 Observable

我也将finalize 更改为tap。 finalize 将在流完成后执行，但 tap 将进入可观察流

Answer 3

尝试将其更改为：

if (this.ngUnsubscribe !== undefined && this.ngUnsubscribe !== null) {
    this.ngUnsubscribe.unsubscribe();
}