Таймер обратного отсчета в Angular 6

Question

Привет! Я пытаюсь получить пример таймера обратного отсчета, который я нашел в стеке:*

Получение следующей ошибки:

timer / timer.component.ts (44,34): ошибка TS2339: Свойство 'interval' не существует для типа 'typeof Observable'.

Я испробовал все способы импорта, которые смог найти в Google, но ничего не помоглоЯ также обновил до последней версии rxjs и до сих пор ничего.Любая помощь будет принята с благодарностью.

Я считаю, что у меня может быть какая-то проблема с версиями или что-то в этом роде.Действительно в тупик.

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

Answer 1

Просто напишите:

import { interval } from 'rxjs';
import { map } from 'rxjs/operators'

interval(1000).pipe(
  map((x) => { /* your code here */ })
);

В RxJS 6+ нет функции Observable.interval.

Answer 2

ngx-countdown - более зрелое решение.Он предоставляет все параметры форматирования, а также функции запуска / остановки / паузы / возобновления.

Демоверсия здесь

Answer 3

Из Rxjs 6.0 необходимо импортировать interval из rxjs/observable/interval.

И использовать оператор pipe для последовательного выполнения бесконечного числа операторов.

import { interval } from 'rxjs';
import { map } from 'rxjs/operators'

this.$counter = interval(1000).pipe(
   map((x) => {
      this.diff = Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
      return x;
  });
)

Ссылка: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#build-your-own-operators-easily