2016-06-28 11 views
0

"interval()"部分を除いて同じ機能を実行する方法はありますか?Angular2 Typescriptの.interval()を使用せずにObservableに配列を接続

私はちょうどオブザーバブルに配列を接続し、次に配列を更新し、オブザーバブルでその配列を見て反応するようにしたい。

データが同じ場合に新しい値を出力しないように、これを実装する方法があり、どこに.distinctUntilChanged()があるのですか?この場合、この "interval(10)"ボトルネックではありません。ここで

はPlunkerです:http://plnkr.co/edit/xlWSTz8gNfByTnT1REw5?p=preview

import {Component} from 'angular2/core'; 
import * as Rx from 'rxjs/Rx' 

@Component({ 
    selector: 'a-webapp', 
    template:` 

    <div> 
    <h2>{{name}}</h2> 

    <button (click)="addToArray()">Add</button> <button (click)="resetArray()">Reset</button> 
    <ul> 
     <li *ngFor="let item of latest$ | async">{{ item | json }}</li> 
    </ul> 

    {{ data | json }} 

    </div> 

    ` 
}) 
export class AppComponent { 

    data = ["one", "two", "three"] 
    data$: Rx.Observable<Array<string>>; 
    latest$: Rx.Observable<Array<string>>; 

    constructor() {} 

    ngOnInit() { 

     this.data$ = Rx.Observable.interval(10).concatMap(y => { 
      return Rx.Observable.of(this.data) 
     }) 

     this.latest$ = Rx.Observable.combineLatest(this.data$, (data) => { 
      return data.map(d => { 
       return d + " is a number" 
      }) 
     }) 
    } 

    addToArray() { 
     this.data.push('more numbers') 
    } 

    resetArray() { 
     this.data = ["one", "two", "three"] 
    } 

} 

答えて

7

「...と、その配列を見て、観察して反応」私はそれが観測は、新たな放射されていた方が良いと思います

を配列が変更されるたびに値が返される

あなたの場合:

export class AppComponent { 
    data = ["one", "two", "three"]; 
    data$: Rx.BehaviorSubject<Array<string>>; // or data$: Rx.Subject<Array<string>> 
    latest$: Rx.Observable<Array<string>>; 

    constructor() {} 

    ngOnInit() { 
    this.data$ = new Rx.BehaviorSubject<Array<string>>(this.data); 

    this.latest$ = this.data$.map(data => data.map(
     d => "" + d + " is a number" 
    )); 
    } 

    addToArray() { 
    this.data.push('more numbers'); 
    this.data$.next(this.data); 
    } 

    resetArray() { 
    this.data = ["one", "two", "three"]; 
    this.data$.next(this.data); 
    } 
} 
+0

これを24時間後に試してみます。あなたが本当にありがとうございました! – Teddy

+0

完璧に動作します! ;))あなたは男です! – Teddy

関連する問題