Angular 6 中的倒数计时器 [英] Countdown Timer in Angular 6
本文介绍了Angular 6 中的倒数计时器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试获取我在 Stack 上搜索的倒数计时器示例:角度 2 中的时间倒计时
这是我的代码:
import { Component, ElementRef, OnInit, OnDestroy } from '@angular/core';import { Observable, Subscription, interval } from 'rxjs';@零件({选择器:'app-timer'，templateUrl: './timer.component.html',styleUrls: ['./timer.component.css']})导出类 TimerComponent 实现 OnInit {私人未来:日期；私人未来字符串:字符串；私人差异:数字；私人 $counter: Observable;私人订阅:订阅；私信:字符串；构造函数(榆树:ElementRef){this.futureString = elm.nativeElement.getAttribute('inputDate');}dhms(t) {让天、小时、分钟、秒；天数 = Math.floor(t/86400);t -= 天 * 86400;小时 = Math.floor(t/3600) % 24;t -= 小时 * 3600;分钟 = Math.floor(t/60) % 60;t -= 分钟 * 60;秒 = t % 60;返回 [天 + 'd',小时 + 'h',分钟 + 'm',秒 + 's'].加入(' ');}ngOnInit() {this.future = 新日期(this.futureString);this.$counter = Observable.interval(1000).map((x) => {this.diff = Math.floor((this.future.getTime() - new Date().getTime())/1000);返回 x;});this.subscription = this.$counter.subscribe((x) => this.message = this.dhms(this.diff));}} 出现以下错误:
<块引用>timer/timer.component.ts(44,34): 错误 TS2339: 属性间隔"'typeof Observable' 类型不存在.
我尝试了所有可以在 Google 上找到的导入方法，但没有任何效果.我也更新到最新版本的 rxjs 还是什么都没有.任何帮助将不胜感激.
我相信我可能有某种版本控制问题或其他问题.真的被难住了.
<块引用>npm 错误！peer dep 丢失:jquery@1.9.1 - 3，bootstrap@4.1.1 需要npm 错误！peer dep 丢失:popper.js@^1.14.3，bootstrap@4.1.1 需要npm 错误！缺少:mkdirp@0.5.1，node-pre-gyp@0.9.1 需要npm 错误！缺少:minimist@0.0.8，mkdirp@0.5.1 需要npm 错误！缺少:minimatch@3.0.4，ignore-walk@3.0.1 需要npm 错误！缺少:大括号扩展@1.1.11，minimatch@3.0.4 需要npm 错误！缺少:平衡匹配@1.0.0，大括号扩展@1.1.11 需要npm 错误！缺少:concat-map@0.0.1，大括号扩展@1.1.11 需要npm 错误！缺少:console-control-strings@1.1.0，npmlog@4.1.2 需要npm 错误！缺少:继承@2.0.3，可读流@2.3.6需要npm 错误！缺少:safe-buffer@5.1.1，可读流@2.3.6 需要npm 错误！缺少:safe-buffer@5.1.1，string_decoder@1.1.1 需要npm 错误！缺少:console-control-strings@1.1.0，gauge@2.7.4 需要npm 错误！缺失:string-width@1.0.2，gauge@2.7.4 需要npm 错误！缺少:strip-ansi@3.0.1，gauge@2.7.4 需要npm 错误！缺失:code-point-at@1.1.0，string-width@1.0.2 需要npm 错误！缺少:is-fullwidth-code-point@1.0.0，string-width@1.0.2 需要npm 错误！缺少:strip-ansi@3.0.1，string-width@1.0.2 需要npm 错误！缺少:number-is-nan@1.0.1，is-fullwidth-code-point@1.0.0 需要npm 错误！缺少:ansi-regex@2.1.1，strip-ansi@3.0.1 需要npm 错误！缺少:string-width@1.0.2，wide-align@1.1.2 需要npm 错误！缺少:继承@2.0.3，glob@7.1.2 需要npm 错误！缺少:minimatch@3.0.4，glob@7.1.2 需要npm 错误！缺失:once@1.4.0，glob@7.1.2 需要npm 错误！缺少:once@1.4.0，inflight@1.0.6 需要npm 错误！缺少:wrappy@1.0.2，inflight@1.0.6 需要npm 错误！缺少:wrappy@1.0.2，由 once@1.4.0 要求npm 错误！缺少:minipass@2.2.4，tar@4.4.1 需要npm 错误！缺少:mkdirp@0.5.1，tar@4.4.1 需要npm 错误！缺少:safe-buffer@5.1.1，tar@4.4.1 需要npm 错误！缺少:yallist@3.0.2，tar@4.4.1 需要npm 错误！缺少:minipass@2.2.4，fs-minipass@1.2.5 需要npm 错误！缺少:safe-buffer@5.1.1，minipass@2.2.4 需要npm 错误！缺少:yallist@3.0.2，minipass@2.2.4 需要npm 错误！缺少:minipass@2.2.4，minizlib@1.1.0 需要 解决方案
简单地写:
import { interval } from 'rxjs';从'rxjs/operators'导入{地图}间隔(1000).管道(map((x) => {/* 你的代码在这里 */}));在 RxJS 6+ 中没有 Observable.interval 函数.
Hi I am trying to get an example of a countdown timer I found searching on Stack found here: Time CountDown in angular 2
This is my code:
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));
}
}
Getting the following error:
timer/timer.component.ts(44,34): error TS2339: Property 'interval' does not exist on type 'typeof Observable'.
I have tried every measure of importing I could find on Google but nothing has worked. I also updated to the latest version of rxjs and still nothing. Any help would be greatly appreciated.
I believe I may have some kind of versioning issue or something. Really stumped.
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
解决方案
Simply write:
import { interval } from 'rxjs';
import { map } from 'rxjs/operators'
interval(1000).pipe(
map((x) => { /* your code here */ })
);
In RxJS 6+ there's no Observable.interval function.
这篇关于Angular 6 中的倒数计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
