用 rxjs 倒数计时器替换子字符串

Question

我正在尝试在我的 angular 12 应用程序中使用 rxjs 实现倒数计时器。在我的 ts 中我有 :

let timeLeft$ = interval(1000).pipe(
  map(x => this.calcTimeDiff(orderCutOffTime)),
  shareReplay(1)
);

calcTimeDiff() 将 return 秒、分钟和小时；

我必须从中创建一个字符串并将其显示在 HTML 中。基本上用 timeLeft$ 替换字符串中的现有单词，这将是一个倒数计时器，显示在 HTML.

类似的东西： this.orderCutOffMessage = someString.replace('Down', 剩余时间$)

https://henrikmassow.medium.com/implement-a-countdown-timer-with-rxjs-in-angular-61600d1af00c

orderCutOffTime = "1645567200000" // 以毫秒为单位的 Unix 时间戳

private calcTimeDiff(cutOffTime: any): timeComponents {
const finalCutOffTime = (cutOffTime).valueOf();
const milliSecondsInASecond = 1000;
const hoursInADay = 24;
const minutesInAnHour = 60;
const secondsInAMinute = 60;
const timeDifference = finalCutOffTime - Date.now();

const hoursToFinalCutOffTime = Math.floor(
  (timeDifference /
    (milliSecondsInASecond * minutesInAnHour * secondsInAMinute)) %
  hoursInADay
);

const minutesToFinalCutOffTime = Math.floor(
  (timeDifference / (milliSecondsInASecond * minutesInAnHour)) %
  secondsInAMinute
);

const secondsToFinalCutOffTime =
  Math.floor(timeDifference / milliSecondsInASecond) % secondsInAMinute;


return { secondsToFinalCutOffTime, minutesToFinalCutOffTime, hoursToFinalCutOffTime };

}

Answer 1

这是您的代码的一个工作示例 https://stackblitz.com/edit/angular-material-table-data-source-znbvdb。它基本上与您共享的 link 中的那个差不多，只是变量的名称已更改，一个变量被丢弃（几天）并且所有内容都放在一个 .ts 文件中。如果这就是您要找的东西，请告诉我。您的 orderCutOffTime 一直是 hard-coded，但您可能会在某些订阅中获得它，因此您可以对其进行调整。此外，timeString 也可能来自订阅。

用 rxjs 倒数计时器替换子字符串

Replace a substring by a rxjs countdowntimer

javascript

rxjs

typescript

angular