Свойство 'interval' не существует для типа 'typeof Observable'.ts (2339)

Question

Моя цель:

Я хочу создать приложение таймера, которое предлагает пользователю ввести время в секундах, и приложение будет вести обратный отсчет до указанного времени (этотаймер обратного отсчета: вы вводите время в секундах, приложение ведет обратный отсчет от введенного вами значения до нуля)

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { interval } from 'rxjs';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/takeWhile';
import 'rxjs/add/operator/do';


const interval = Observable.interval(100);
           interval
            .takeWhile((_: any) => !this.isFinished )
            .do( () => this.current += 0.1)
            .subscribe();

Сведения о версии:

• Угловой CLI: 8.3.5
• Узел: 12.2.0
• rxjs: 6.4.0

РЕДАКТИРОВАТЬ: Я хотел быИнтерпретировать этот код:

const interval = Observable.interval(100);
               interval
                .takeWhile((_: any) => !this.isFinished )
                .do( () => this.current += 0.1)
                .subscribe();

в соответствии с последним стандартом от rxjs: 6.4.0 , все остальное остается неизменным ( пытается получить какой-то жаргон, но я до сих пориспачкать руки с помощью Angular )

Answer 1

Используя rxjs 6+, вы должны импортировать операторы из 'rxjs/operators' и функции Observable из 'rxjs', как сказано в этом руководстве по обновлению , а операторы теперь используются с pipe(), как сказано здесь .

Это должно сделать это:

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

const userValueSeconds = 3;

interval(100).pipe(    // run every 100ms
  takeWhile(i => userValueSeconds - (i/10) >= 0 ),  // stop when it gets to the value entered
  map(i => i * 100)                                  // map to ms
).subscribe(ms => console.log(ms));

Демо код:

<input type="text" placeholder="Seconds" [formControl]="secondsCtrl">
<button (click)="run(secondsCtrl.value)">Run</button>
<div> TIMER: {{timer$ | async | date : 'mm:ss:SS'}} </div>

import { Component, OnInit } from '@angular/core';
import { Observable, interval } from 'rxjs';
import { takeWhile, map } from 'rxjs/operators';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {

  secondsCtrl: FormControl;
  timer$: Observable<number>;

  ngOnInit(){
    this.secondsCtrl = new FormControl(3);
  }

  run(seconds: number) {
    this.timer$ = interval(100).pipe(
      takeWhile(i => seconds - (i/10)  >= 0 ),
      map(i => i * 100)
    );
  }


}

Answer 2

Rxjs 6 не хочет, чтобы вы использовали глубокий импорт!Вы должны использовать метод .pipe для объединения операций, которые в свою очередь импортируются из rxjs/operators.

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';
import { map, takeWhile } from 'rxjs/operators';


const interval = interval(100);

let current = 0;
interval.pipe(
  takeWhile((_: any) => current < 5),
  map((_: any) => {current += 0.1; return current; })
).subscribe(
  (value: any) => {
    console.log(value);
    // Do something here while current < 5
  }
)