rxjs с angular2: в класс компонента, как преобразовать изменения данных поля ввода в поток rxjs

Сказано, что мы можем преобразовать что угодно в поток с помощью rxjs, здесь я хочу преобразовать данные, поступающие из поля ввода, в поток, а затем подписаться на него, в angular2 есть метод для этого с использованием события valueChanges

this.input.valueChanges.subscribe( 
   (value: string) => { console.log('sku changed to: ', value); } 
);

но когда я пытаюсь создать поток в классе компонентов, как этот

Observables.create().subscribe()

создание не распознается, также как я могу сделать это в rxjs, когда значение изменяется в поле ввода, это связано с формами angular2, а также что полезная функция для создания потока для этого


angular reactive-programming rxjs angular2-forms rxjs5
person blackHawk    schedule 04.03.2016    source источник
comment
Похоже на дубликат stackoverflow.com/questions/35800792/   -  person Günter Zöchbauer    schedule 04.03.2016
comment
нет, я знаю, как создать поток, но проблема в том, что Observables.create дает ошибку в классе компонента, например, что это не разрешено в классе для создания, как я могу сделать его доступным в классе компонентов   -  person blackHawk    schedule 04.03.2016
comment
переместить его в функцию   -  person Günter Zöchbauer    schedule 04.03.2016
comment
this.input.valueChanges уже Observable<string>, к которому вы можете subscribe(), чтобы получить поток изменений. Каков ваш настоящий вопрос?   -  person Mark Rajcok    schedule 04.03.2016
comment
Я считаю, что использование Subject отлично работает. Например: var stream = new Subject<string>(); stream.next("some changes"); Конечно, вам нужно import Subject. Subject - это Observable, на который можно подписаться.   -  person Stephen Chung    schedule 05.03.2016

Ответы (2)


arrow_upward
4
arrow_downward

В Angular 2 уже есть FormControl, который предоставляет объект valueChanges, на который вы можете подписаться.

Вот рабочий Plunker и код:

Важные части:
- [FormControl] = "модель" (в элементе ввода)
- model = new FormControl () (из @ angular / forms)

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
      Some Value: 
      <input type="text" [formControl]="model" />
      <div>{{model.value}}</div>
      <span *ngFor="let val of values">{{val}},</span>
    `
})
export class AppComponent {
  model:FormControl = new FormControl()
  values = [];
  constructor() {
    this.model.valueChanges.subscribe(s=>this.values.push(s));
  }
}

Также в вашем AppModule вам нужно импортировать ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
    imports: [
        ...
        ReactiveFormsModule
    ],
    declarations: [...],
    bootstrap: [...]
})

export class AppModule { }
person Abdulrahman Alsoghayer    schedule 05.03.2016
comment
ссылка на NgFormControl мертва, Control тоже не найден - person Toolkit; 14.12.2016

arrow_upward
0
arrow_downward

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

var observable = Observable.create((observer) => {
  // Should be execute asynchronously
  observer.next('some event');
});

В Angular2 наблюдаемый valueChanges позволяет инициировать цепочку асинхронной обработки. Вы можете использовать такие операторы, как flatMap, чтобы связать другой наблюдаемый объект. Например, чтобы выполнить HTTP-запрос при изменении значения ввода:

var observable = this.input.valueChanges
            .flatMap((val) => {
              return this.http.get('http://...').map(res => res.map();
            });
person Thierry Templier    schedule 04.03.2016
comment
Я знаю о методе создания, проблема в классе компонентов, где я хочу, чтобы код записи обнаруживал изменение в значении определенного поля с использованием наблюдаемого не разрешено, его разрешено вне класса компонента - person blackHawk; 04.03.2016
comment
Что точно не разрешено в вашем классе компонентов? Просто хочу правильно разобраться в своей проблеме ... - person Thierry Templier; 04.03.2016
comment
Почему использование Observable.create невозможно в вашем классе компонентов? См. Этот плагин: plnkr.co/edit/XqHYTqL2BadyVltajVhs?p=preview. - person Thierry Templier; 04.03.2016