使用可观察到的Angular 2 / RxJs 5 beta从while循环流式传输数据

Question

I want to create a simple app in Angular 2 which computes (for example) primes in a while loop and updates new found values to the view. I want to display the primes array with *ngFor in a real time way so that the user sees that the app is computing. The script is running in a web worker so the while loop shouldn't block the app. This is what i had in mind:

// Prime Service
getPrimes(n: number) {
     var i = 0;
     while (1) {
        this.isPrime(i) ? this._dataStore.primes.push(i) : null;
        this.primes$.next(this._dataStore.primes);
        i++;
    }
}

Items are only pushed after all loops are finished tho (tested with for loop aswell). I tried looking into using generators but that feature doesn't seem to work in RxJs 5 beta yet.

Is there a better solution or are observables not suited for what I want in general?

Answer 1

You could use the Observable.range() operator to generate the number sequence and then filter the sequence using your isPrime() method.

you could also use Observable.generate() . but I think it's not supported by Angular yet.

Here is a sample code (plunker) . you just need to change the isPrime() implementation and the range of the numbers.

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

    @Component({
        selector: 'my-app',
        template: `<h1>Count: {{primes.length}}</h1>
        <div *ngFor="#prime of primes">{{prime}}</div>`
    })
    export class AppComponent {
      primes:number[] = [];

      ngOnInit(){
        var source = Observable.range(2,1000);
        source.filter(i => this.isPrime(i)).subscribe(i=>this.primes.push(i));
      }

      isPrime(num:number){
         for(let n of this.primes)
            if(num % n ===0) return false
         return true;
      }
    }