angular – 无法读取未定义的属性’unsubscribe'(rxJS – 订

我想通过取消订阅来更改Observable的间隔,然后使用新的间隔设置重新订阅.

应该是非常简单,但由于我是这个领域的初学者,我可能需要一些帮助.

见这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');
  }
}