Наблюдаемые угловые 7 и RxJS - PullRequest
Новая
       4

Наблюдаемые угловые 7 и RxJS

0 голосов
/ 06 февраля 2019

Я сейчас пытаюсь освоить функции RxJs.Для начала я бы хотел объединить две наблюдаемые с функцией concat.К сожалению, без успеха.Вот мой код:

Компонент => 

import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { interval, range, concat } from 'rxjs';

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


  constructor(private appareilsService : AppareilsService ) {
  }

  ngOnInit() {

    var counter = interval(1000)
    var sequence = range(1, 10)
    var concat(counter,sequence)

    concat.subscribe(
      (value) => {
        this.rxjsValue = value
      },
      (error) => {
        console.log('Uh-oh, an error occurred! : ' + error);
      },
      () => {
        console.log('Observable complete!');
      }
    )
  }

}

Шаблон => 

<p>
{{ rxjsValue }} 
</p>

Итакидея в том, что каждую секунду rxJsValue редактируется в шаблоне и отображается для просмотра.Так как я строго следую документации, я довольно смущен, я должен признать: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-concat

Я не вижу недостатка в логике, кто-то может указать мне, где проблема?

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Вы можете достичь следующего, используя interval, а также операторы take и map в сочетании с async pipe:

Компонент: 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  rxjsValue$: Observable<number>;

  ngOnInit() {
    this.rxjsValue$ = interval(1000).pipe(take(10), map(r => r + 1));
  }
}

Template: 

{{rxjsValue$ | async}}

Вот пример в действии в действии.

В вашем примере вашего вопроса у вас есть две отдельные строки операторов import, оба изrxjs, это может вызвать ошибки компиляции.Как минимум, их необходимо объединить в одно утверждение: 

import { Observable, interval, range, concat } from 'rxjs';

Надеюсь, это поможет!

0 голосов
/ 06 февраля 2019

Я не очень понимаю, почему вы используете concat, вы можете увидеть здесь рабочий пример, который я вам сделал https://stackblitz.com/edit/angular-abxeqw

...