无法读取未定义的属性'unsubscribe'（rxJS - 订阅）

Question

I am trying to get a grip of subscriptions and observables in rxJS.

I want to change the interval of an Observable by unsubscribing and then resubscribe using the new interval setting.

Should be really simple but since I'm a beginner in this area I could need some assistance.

See this plunk

export class AppComponent implements OnInit {
  title = 'Observable Interval - Changing interval';
  currentTime: any;
  refreshInterval: number = 1000;
  private subscription: Subscription;

  constructor(private timeService: TimeService) {
  }

  clicked($event) {
    console.log('new refreshInterval: ' + this.refreshInterval);

    // Here I would like to unsubscribe to the subscription 
    // and then resubscribe using the new interval. 
    // However using below statement causes a 
    // TypeError: Cannot read property 'unsubscribe' of undefined
    this.subscription.unsubscribe();
    this.getTime();
  }

  // with this implementation changing the refreshInterval won't have any affect. 
  getTime() {
            this.timeService.getTime(this.refreshInterval)
              .subscribe(t => {
                this.currentTime = t;
              }
            );
    }

  ngOnInit() {
    this.subscription = this.getTime();
    console.log(this.subscription);
    console.log('refreshing each ' + this.refreshInterval + ' ms');
  }
}

Answer 1

You need to return the subscription within the getTime method:

getTime() {
  return this.timeService.getTime(this.refreshInterval) // <-----
          .subscribe(t => {
            this.currentTime = t;
          }
        );
}

In your case, nothing is returned. That's why you have an undefined error...