Question

我正在尝试使用observables，我收到一条错误说＆＃34;无法读取属性＆＃39;取消订阅＆＃39; of null＆＃34;。我想知道我应该在哪里调用我的取消订阅方法。我也想知道我的可观察设置是否错误。我有一个服务，一个组件和一个看起来像这样的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`

Angular 4，Observables和＆＃34;无法读取属性＆＃39;取消订阅＆＃39; of null＆＃34;

1 个答案: