Angular 管道中的倒数计时器无法使用管道和地图

Question

我对 RXJS 有点陌生，所以不太确定 Pipe 和 Map 在这里是如何使用的，但下面的行从未被调用过。它在管道和地图中。

return this.msToTime(this.getMsDiff(futureDate));

在屏幕上，我只看到 [object, object]，而不是倒数计时器。

这是 Angular 管道的 git repo。

我创建了一个 Stacklitz here，它在屏幕上没有显示任何输出。如果取消注释管道图部分，屏幕上只会看到 [object, object]。

EDIT - 如果我用如下所示的订阅替换管道和地图，我可以在 console.log 中看到增量值，但屏幕上没有任何显示。

const source = timer(0, 1000);
const abc = source.subscribe(val => {
  const timeRemaining = this.msToTime(this.getMsDiff(futureDate));
  console.log(timeRemaining);
  return timeRemaining;
});

<span class="float-right yb-color">{{event.datePendingUtc | timeRemaining}}</span>

/**
 * @param futureDate    should be in a valid Date Time format
 *                      e.g. YYYY-MM-DDTHH:mm:ss.msz
 *                      e.g. 2021-10-06T17:27:10.740z
 */
public transform(futureDate: string): Observable < string > {
  /**
   * Initial check to see if time remaining is in the future
   * If not, don't bother creating an observable
   */
  if (!futureDate || this.getMsDiff(futureDate) < 0) {
    return null;
  }
  return timer(0, 1000).pipe(
    map(() => {
      // never gets hit
      return this.msToTime(this.getMsDiff(futureDate));
    })
  );
}

/**
 * Gets the millisecond difference between a future date and now
 * @private
 * @param   futureDate: string
 * @returns number  milliseconds remaining
 */
private getMsDiff = (futureDate: string): number => (+(new Date(futureDate)) - Date.now());

/**
 * Converts milliseconds to the
 *
 * @private
 * @param msRemaining
 * @returns null    when no time is remaining
 *          string  in the format `HH:mm:ss`
 */
private msToTime(msRemaining: number): string | null {
  if (msRemaining < 0) {
    console.info('No Time Remaining:', msRemaining);
    return null;
  }

  let seconds: string | number = Math.floor((msRemaining / 1000) % 60),
    minutes: string | number = Math.floor((msRemaining / (1000 * 60)) % 60),
    hours: string | number = Math.floor((msRemaining / (1000 * 60 * 60)) % 24);

  /**
   * Add the relevant `0` prefix if any of the numbers are less than 10
   * i.e. 5 -> 05
   */
  seconds = (seconds < 10) ? '0' + seconds : seconds;
  minutes = (minutes < 10) ? '0' + minutes : minutes;
  hours = (hours < 10) ? '0' + hours : hours;

  return `${hours}:${minutes}:${seconds}`;
}

Answer 1

在 rxjs 中移动 msToTime 函数 map

return source.pipe(
  map(_ => this.msToTime(this.getMsDiff(futureDate)))
);

在模板中你看到 [object, object] 因为你从 filter 管道返回 Observable，所以使用 Async 订阅它就像

<div> date countdown: {{ '2021-10-06T17:27:10.740z' | filter | async }} </div>

Demo

Angular 管道中的倒数计时器无法使用管道和地图

Countdown timer in Angular pipe not working using pipe and map

javascript

angular

timer

rxjs

angular-pipe