Angular 2 个可观察<number>

Question

我正在 AngularJS 2 中做一个倒数计时器，从 n= 60 秒开始（即 hh: min: sec）

为此，我有以下内容：

countDown: Observable<number>;
count = 60;

constructor() { 
this.countDown = Observable.timer(0,1000)
.take(this.count)
.map(()=> --this.count);

}

HTML

<h2>{{ countDown/(60*60)}} : {{countDown/60}} : {{countDown%60}}</h4>

我得到的输出是 "NaN : NaN : NaN"，但是当我使用 <h2>{{ countDown}}</h2> 时，我得到了正确的倒计时，但不是我想要的方式

Answer 1

您正在尝试使用 Observable 对象而不是数字执行算术运算。使用异步管道并将其保存在 a local html reference.

中

<h2 *ngIf="countDown | async as countValue">{{ countValue/(60*60)}} : {{countValue/60}} : {{countValue%60}}</h2>

Angular 2 Observable<number>