rxjs与angular2：进入组件类如何将输入字段数据更改转换为rxjs流

它说我们可以使用rxjs将任何东西转换为流，这里我想将来自输入字段的数据转换为流，然后订阅它，有方法angular2此使用valueChanges事件rxjs与angular2：进入组件类如何将输入字段数据更改转换为rxjs流

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

但是当我试着去喜欢这个

Observables.create().subscribe()

的创造不被识别，还我怎样才能做到这一点在创建组件类流rxjs作为值变成输入字段，其关系教育署angular2形式，也什么是有用的功能，为这个

来源

2016-03-04 blackHawk

看起来像一个dup http://stackoverflow.com/questions/35800792/how-do-you-return-new-observablefunctionobserver-with-rxjs-v5?noredirect=1#comment59272278_35800792 –

不，我知道如何创建流，但问题是Observables.create在组件类中给出错误，就像它在类中不允许创建的那样，我如何使它可用于组件类 – blackHawk

将它移入函数 –

我不知道理解你的问题，创建流，但你可以用Observable类创建一个原始流及其类似这样的创建方法：

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

在Angular2中，valueChanges observable允许启动异步处理链。您可以利用像flatMap这样的运营商来链接另一个可观察项。例如当输入的值更改为执行的HTTP请求：

var observable = this.input.valueChanges 
      .flatMap((val) => { 
       return this.http.get('http://...').map(res => res.map(); 
      });

来源

2016-03-04 17:19:17

我知道创建方法，问题出在组件类中，我想要使用observable来检测变化到特定字段的值的变化，它允许的外部组件类 – blackHawk

组件类中不准确的是什么？只是想正确理解您的问题... –

Observable.create – blackHawk

角2已经拥有FormControl它公开了一个可观察到的valueChanges可以订阅。

这里是一个工作Plunker和代码：

的重要部分是：
- [FormControl] = “模型”（在输入元件）
- 模型=新FormControl（）（从@角/表格）

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 { }

来源

2016-03-05 14:59:20 Abdulrahman

链接到NgFormControl已死，控制也没有找到 – Toolkit

@ToolKit谢谢，我会尽快解决它 – Abdulrahman

rxjs与angular2：进入组件类如何将输入字段数据更改转换为rxjs流

回答

相关问题