RxJS: Operator from

Operator from

Operator from zamienia podaną, w parametrze wartość w obiekt typu Observable.

Za pomocą tego operatora możesz stworzyć Observable z tablicy, Promise lub iterowalnego obiektu.

Przykłady

Przykład 1

import { from } from 'rxjs';

const observable = from([1, 2, 3]);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: 1
// value: 2
// value: 3

Przykład 2

W przypadku gdy jako parametr przekażemy ciąg znaków operator from potraktuje to jako tablicę znaków. Oznacza to, że każdy znak zostanie wysłany jako pojedyncza wartość.

import { from } from 'rxjs';

const observable = from('Hello');
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: H
// value: e
// value: l
// value: l
// value: o

Jeśli przekażemy łańcuch znaków za pomocą tablicy, ten tekst zostanie przesłany jako jedna wartość:

import { from } from 'rxjs';

const observable = from(['Hello']);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: Hello

Przykład 3

Za pomocą tego operator możemy zmienić Promise w Observable:

import { from } from 'rxjs';

const promise = new Promise(resolve => resolve('Some value'));

const observable = from(promise);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: Some value

Przykład 4

Załóżmy, że mamy dokument HTML, który zawiera taką strukturę:

<h2>Some header 1<h2>

...

<h2>Some header 2<h2>

...

<h2>Some header 3<h2>

I chcemy pobrać treść z nagłówków h2. Przykład:

import { from } from 'rxjs';

const allH2 = document.querySelectorAll('h2');

const observable = from(allH2);
observable.subscribe(value => console.log('value: ', value.innerText));

// Wynik:
// value: Some header 1
// value: Some header 2
// value: Some header 3