Наблюдаемые объекты Angular 7 и RxJS
в настоящее время я пытаюсь освоить функции 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.info('Uh-oh, an error occurred! : ' + error);
},
() => {
console.info('Observable complete!');
}
)
}
}
Шаблон =>
<p>
{{ rxjsValue }}
</p>
Итак, идея состоит в том, что каждую секунду rxJsValue редактируется в шаблоне и отображается для просмотра. Поскольку я строго следую документации, я довольно запутался, должен признать: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-concat
Я не вижу недостатка в логике, может ли кто-нибудь указать мне, в чем проблема?
Вы намерены отображать счетчик, который начинается с 1 и заканчивается на 10, обновляясь каждую секунду? stackblitz.com/edit/angular-lm2aaz
Спасибо за ваши ответы, ребята. Linhh, я попробовал ваше решение, и оно встречает меня с неопределенной ошибкой. Как-то странно, похоже, функция просто не распознана. Александр, да это именно моя точка зрения!
Ответы 2
Я не очень понимаю, почему вы используете concat, вы можете увидеть здесь рабочий пример, который я сделал для вас https://stackblitz.com/edit/angular-abxeqw
Большое спасибо за ваш пример, очень ясно. На самом деле, в моем случае функция concat сама по себе не выполняет цели, за ней нет никакой логики. Это не более чем упражнение для изучения возможностей RXJS. Редактировать: еще раз спасибо за ваше видео, я проверю его прямо сейчас!
Если вы учитесь, видео, которое я вам рассказал, может вам очень помочь, хорошая страница для изучения rxjs (на мой взгляд, лучше, чем официальная документация) Learnrxjs.io @FitzChevalerie
еще раз большое спасибо! всегда хорошо иметь дополнительную документацию
Вы можете добиться следующего, используя interval, а также операторы take и map в сочетании с каналом async:
Компонент:
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));
}
}
Шаблон:
{{rxjsValue$ | async}}
Вот пример в действии.
В вашем примере на ваш вопрос у вас есть две отдельные строки операторов import, обе из rxjs, это может вызвать ошибки компиляции. Как минимум, их нужно объединить в один оператор:
import { Observable, interval, range, concat } from 'rxjs';
Надеюсь, это поможет!
Элегантное решение, а также очень полезно! большое спасибо за ваш вклад
Вы также можете рассмотреть пример Умный счетчик из документации Learn-rxjs для более продвинутого подхода.
Я буду проверять это! очень признателен
Вместо
var concat(counter,sequence), возможно,const concat = concat(counter, sequence), который возвращает наблюдаемое, на которое вы можете подписаться.