Angular 4、Observables 和“无法读取属性 'unsubscribe' of null”

Question

我正在尝试使用 observables，但我收到一条错误消息，提示“无法读取属性 'unsubscribe' of null”。我想知道我应该在哪里调用我的取消订阅方法。我也想知道我的可观察设置是否错误。我有一个服务、一个组件和一个看起来像这样的 HTML 模板：

 // *** Service *** 
 private elements : Map<Category, string[]> = new Map<Category, string[]>();

 // I want to populate the map when the service is constructed
 constructor(private httpClient : HttpClient){
    for (enum in Category){
       if (!isNaN(enum as any)){
          this.httpClient.get<string[]>(someUrl + enum).subscibe(data => {
            this.elements.set(category, data);
          });
       }
    }
 }

 getElements(category: Category) : Observable<string[]> {
    return Observable.create(this.elements.get(category)); 
 }
 .
 .
 .
 // *** The component ***
 getCategoryList(category : Category) : Observable<string[]> {
   this.categoryService.getElements(category);
 }

 .
 .
 .
 // *** The template ****
 <div *ngFor="let element of getCategoryList('WARM_ELEMENTS') | async ">
    <div class="row">
       {{element}} 
    </div>
 </div>

我想我在某个地方需要一个取消订阅方法，或者 / 并且我的可观察设置有问题（我现在正在学习 Angular）。

Answer 1

通常，您在使用HttpClient 时不需要取消订阅，如果您想确保无需订阅，您可以改为使用take(1)。

 this.httpClient.get<string[]>(someUrl + enum).take(1).subscibe(data => {
    this.elements.set(category, data);
 });

如果您想真正让订阅始终有效（例如当您使用 firebase 时），您需要在 OnDestory 内取消订阅并将该订阅分配给一个变量以便您可以访问它，但 OnDestory 用于组件 不是为了服务其实也是为了服务。

无论如何，还有其他选择；使用takeWhile() 和takeUntil()。

你可能需要类似的东西：

 private _keepAlive: boolean = true;

 constructor(private httpClient : HttpClient){
    for (enum in Category){
       if (!isNaN(enum as any)){
          this.httpClient.get<string[]>(someUrl + enum).takeWhile(() => this._keepAlive).subscibe(data => {
            this.elements.set(category, data);
          });
       }
    }
 }

 stopSubscription() : void { // this is just an option you can remove it
    this._keepAlive = false;
 }

 ngOnDestroy()
 {
    this._keepAlive = false;
 }

这并不是最理想的，但我希望至少能回答你的问题。

这里还有一个问题，答案应该对你有帮助：Angular/RxJs When should I unsubscribe from `Subscription`