代码之家 › 专栏 › 技术社区 › user68288

倒计时计时器,角度6

rxjs angular

7

user68288 · 技术社区 · 8 年前

嗨,我正在尝试获取一个倒计时计时器的示例,我在这里找到的堆栈上搜索: 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):错误ts2339:属性“interval” “typeof observable”类型上不存在。

我尝试过在谷歌上找到的每一种导入方法,但都没有奏效。我也更新到了最新版本的RXJS,但仍然一无所获。任何帮助都将不胜感激。

我相信我可能有某种版本控制问题或者其他什么问题。真是难堪。

npm ERR! peer dep missing: jquery@1.9.1 - 3, required by bootstrap@4.1.1
npm ERR! peer dep missing: popper.js@^1.14.3, required by bootstrap@4.1.1
npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.9.1
npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1
npm ERR! missing: minimatch@3.0.4, required by ignore-walk@3.0.1
npm ERR! missing: brace-expansion@1.1.11, required by minimatch@3.0.4
npm ERR! missing: balanced-match@1.0.0, required by brace-expansion@1.1.11
npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.11
npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2
npm ERR! missing: inherits@2.0.3, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by string_decoder@1.1.1
npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.2
npm ERR! missing: inherits@2.0.3, required by glob@7.1.2
npm ERR! missing: minimatch@3.0.4, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
npm ERR! missing: minipass@2.2.4, required by tar@4.4.1
npm ERR! missing: mkdirp@0.5.1, required by tar@4.4.1
npm ERR! missing: safe-buffer@5.1.1, required by tar@4.4.1
npm ERR! missing: yallist@3.0.2, required by tar@4.4.1
npm ERR! missing: minipass@2.2.4, required by fs-minipass@1.2.5
npm ERR! missing: safe-buffer@5.1.1, required by minipass@2.2.4
npm ERR! missing: yallist@3.0.2, required by minipass@2.2.4
npm ERR! missing: minipass@2.2.4, required by minizlib@1.1.0

3 回复 | 直到 8 年前

1

10

gonzo 7 年前

只需写:

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

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

在RXJS 6+中没有 Observable.interval 功能。

2

1

Ritwick Dey 8 年前

从 Rxjs 6.0 您必须导入 interval 从 rxjs/observable/interval .

你必须使用 pipe 运算符按顺序执行无限个运算符。

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

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

参考文献: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-your-own-operators-easily

3

0

Nitin Kamate 7 年前

ngx-countdown 是一个更成熟的解决方案。它提供所有格式化选项以及启动/停止/暂停/恢复功能。

现场演示 here