无法读取 null 的属性“订阅”答案

【问题标题】：Cannot read property 'subscribe' of null无法读取 null 的属性“订阅”
【发布时间】：2019-12-13 12:34:53
【问题描述】：

我正在尝试订阅以下从 json 文件中读取数据的方法：

  getDefaultNavbarStyle(templateId): any {
    let template = null;
    switch (templateId) {
      case ActiveTemplates.Default:
        this.httpClient.get(this.DEFAULT_TEMPLATE_PATH).subscribe(response => {
          template = response;
        });
        break;
      case ActiveTemplates.Quick:
        this.httpClient.get(this.QUICK_TEMPLATE_PATH).subscribe(response => {
          template = response;
        });
        break;
      case ActiveTemplates.Front:
        this.httpClient.get(this.FRONT_TEMPLATE_PATH).subscribe(response => {
          template = response;
        });
        break;
      default:
        break;
    }
    return template;
  }

来自另一个组件：

this.defaultNavbarStyleSubscription = this.builderNavbarService.getDefaultNavbarStyle(this.navbarTemplate).subscribe(response => {
  if (response) {
    this.defaultNavbarStyle = response;
  }
});

但是，我不断收到以下错误：

ERROR TypeError: Cannot read property 'subscribe' of null

我能做些什么来解决它？我已将模板初始化为 null，但在 switch 语句中设置了它的值。

【问题讨论】：

您只能订阅Observable，但您的case 返回Subscription，因为您执行.subscribe()

标签： angular

【解决方案1】：

通过拥有一个发出请求的方法，您通常会返回Observable<any> 以作为调用者订阅它：

改成：

方法：

getDefaultNavbarStyle(templateId): Observable<any> {
    switch (templateId) {
      case ActiveTemplates.Default:
        return this.httpClient.get(this.DEFAULT_TEMPLATE_PATH)
      case ActiveTemplates.Quick:
        return this.httpClient.get(this.QUICK_TEMPLATE_PATH)
      case ActiveTemplates.Front:
        return this.httpClient.get(this.FRONT_TEMPLATE_PATH)
    }
  }

来电者：

this.defaultNavbarStyleSubscription = this.builderNavbarService.getDefaultNavbarStyle(this.navbarTemplate).subscribe(response => { this.defaultNavbarStyle = response; });

【讨论】：

【解决方案2】：

只需将 template = 添加到每个案例并删除 .subscribe

case ActiveTemplates.Default:
    return this.httpClient.get(this.DEFAULT_TEMPLATE_PATH);
case ActiveTemplates.Quick:
    return ...

【讨论】：