Angular 6中的倒数计时器

发布时间：2020-12-17 17:24:13 所属栏目：安全来源：网络整理

导读：嗨,我想得到一个倒计时器的例子,我发现搜索在这里找到堆栈： Time CountDown in angular 2 这是我的代码： import { Component,ElementRef,OnInit,OnDestroy } from '@angular/core';import { Observable,Subscription,interval } from 'rxjs';@Component({

嗨,我想得到一个倒计时器的例子,我发现搜索在这里找到堆栈： Time CountDown in angular 2

这是我的代码：

import { Component,ElementRef,OnInit,OnDestroy } from '@angular/core';
import { Observable,Subscription,interval  } from 'rxjs';

@Component({
  selector: 'app-timer',templateUrl: './timer.component.html',styleUrls: ['./timer.component.css']
})
export class TimerComponent implements OnInit {
  private future: Date;
  private futureString: string;
  private diff: number;
  private $counter: Observable<number>;
  private subscription: Subscription;
  private message: string;

  constructor(elm: ElementRef) {
      this.futureString = elm.nativeElement.getAttribute('inputDate');
  }

  dhms(t) {
      let days,hours,minutes,seconds;
      days = Math.floor(t / 86400);
      t -= days * 86400;
      hours = Math.floor(t / 3600) % 24;
      t -= hours * 3600;
      minutes = Math.floor(t / 60) % 60;
      t -= minutes * 60;
      seconds = t % 60;

      return [
          days + 'd',hours + 'h',minutes + 'm',seconds + 's'
      ].join(' ');
  }

  ngOnInit() {
      this.future = new Date(this.futureString);
      this.$counter = Observable.interval(1000).map((x) => {
          this.diff = Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
          return x;
      });

      this.subscription = this.$counter
          .subscribe((x) => this.message = this.dhms(this.diff));
  }
}

收到以下错误：

timer/timer.component.ts(44,34): error TS2339: Property ‘interval’
does not exist on type ‘typeof Observable’.

我已尝试过在Google上可以找到的所有导入措施,但没有任何效果.我也更新到最新版本的rxjs,但仍然没有.任何帮助将不胜感激.

我相信我可能会遇到某种版本问题.真的很难过.

06001

解决方法

只需写：

import { interval } from 'rxjs';
import { map } from 'rxjs/operators'

interval(1000).pipe(
  map((x) => { /* your code here */ })
);

在RxJS 6中,没有Observable.interval函数.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!