Angular 角度5-基本计时器对象未在UI中更新

我正在开发一个内置于Angular 5的应用程序，它需要一个基本的mm:ss倒计时计时器，它最终将被动态设置。我尝试过许多不同的解决方案，但都是以相同的方式进行的

我开始硬编码只是为了让它运行，并添加了一个基本功能：

time: number = 60;
interval;

startTimer() {
    this.interval = setInterval(() => {
        if (this.time > 0) {
            this.time--;
        } else {
            this.time = 60;
        }
    }, 1000)
}

在前端，我用一个按钮调用函数：

<button (click)='startTimer()'>Start Timer</button>
<p>{{ time }} seconds remaining....</p>

启动计时器
还有{{time}}秒

当页面加载时，可以看到数字60。但它不会倒计时。当你按下按钮时，数字将变为它所能达到的任何一秒。例如，它将显示60，2秒后单击它，数字将变为58。因此，计时器正在后台运行，但用户界面中的数字没有更新

---

我不熟悉棱角，所以我可能会用一些基本的东西。我见过其他需要创建管道或订阅的解决方案，但我尝试过的所有解决方案似乎都与此相同。任何提示都将不胜感激

我认为最好使用RxJS而不是

setInterval（）

方法。使用RxJS

timer

函数和

take

和

map

操作符尝试以下操作

控制器

timer$：可观察；
startTimer（计数器：编号）{
this.timer$=计时器（0，1000）.pipe(
拿（柜台），
映射（=>--计数器）
);
}

模板

启动计时器
还有{{计时器}}秒

工作示例：

---

更新：RxJS的旧版本（我认为最好使用RxJS而不是

setInterval（）

方法。使用RxJS

timer

函数和

take

和

map

操作符尝试以下操作

控制器

timer$：可观察；
startTimer（计数器：编号）{
this.timer$=计时器（0，1000）.pipe(
拿（柜台），
映射（=>--计数器）
);
}

模板

启动计时器
还有{{计时器}}秒

工作示例：

---

更新：RxJS的旧版本（使用RxJS的另一种方式

//导入
从“rxjs”导入{interval，Observable}；
从'rxjs/operators'导入{map，take}；
...
//在组件内部
超时$：可观察到；
设置倒计时（时间=60）{
此.timeout$=间隔（1000）.pipe(
花点时间，
映射（t=>time-t-1）
);
}

启动计时器
还有{timeout$| async}}秒

使用RxJs的另一种方法

//导入
从“rxjs”导入{interval，Observable}；
从'rxjs/operators'导入{map，take}；
...
//在组件内部
超时$：可观察到；
设置倒计时（时间=60）{
此.timeout$=间隔（1000）.pipe(
花点时间，
映射（t=>time-t-1）
);
}

启动计时器
还有{timeout$| async}}秒

尝试此选项：

startTimer() {
    this.interval = setInterval(() => {
      if (this.time > 0) {
        this.time -= 10;
      } else {
        clearInterval(this.interval);
        this.time = 60;
      }
    }, 1000)
  }

尝试此选项：

startTimer() {
    this.interval = setInterval(() => {
      if (this.time > 0) {
        this.time -= 10;
      } else {
        clearInterval(this.interval);
        this.time = 60;
      }
    }, 1000)
  }

---

我认为您需要通过同步数据。@AbdelrhmanArnos:OP在需要模板中的

async

管道的时候没有使用可观察对象。我认为您需要通过同步数据。@AbdelrhmanArnos:OP在需要模板中的

async

管道的时候没有使用可观察对象。我尝试过使用RxJS。问题不是如果从“rxjs”添加导入语句import{timer}，则无法识别计时器-我假设这是由于是v5…？我发现了这个替代导入语句：import{timer}来自'rxjs/observable/timer'；-它们是一个还是相同？@odinel:语法不同b/n rxjs 5+和rxjs 6+。我已经更新了rxjs v5的答案。我尝试过使用rxjs。问题是如果从“rxjs”添加import语句import{timer}，则无法识别计时器-我假设这是因为是v5…？我发现了这个替代的导入语句：从'rxjs/observable/timer'导入{timer}；-它们是一个还是相同的？@odinel:语法不同b/n rxjs 5+和rxjs 6+。我已经更新了rxjs v5的答案。