使用 Angular 2/RxJs 5 beta observable 从 while 循环流式传输数据答案

【问题标题】：Using Angular 2/RxJs 5 beta observable to stream data from a while loop使用 Angular 2/RxJs 5 beta observable 从 while 循环流式传输数据
【发布时间】：2016-02-23 12:58:28
【问题描述】：

我想在 Angular 2 中创建一个简单的应用程序，它计算（例如）while 循环中的素数并将新找到的值更新到视图中。我想用 *ngFor 实时显示素数数组，以便用户看到应用程序正在计算。该脚本在网络工作者中运行，因此 while 循环不应阻止应用程序。这就是我的想法：

// 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++;
    }
}

只有在所有循环完成后才会推送项目（也使用 for 循环进行测试）。我尝试研究使用生成器，但该功能似乎在 RxJs 5 beta 中不起作用。

有没有更好的解决方案，或者 observables 通常不适合我想要的？

【问题讨论】：

我认为while() 正在阻塞；您可以仅使用 observables 创建类似的功能，使用 interval 创建并使用 takeUntil 停止执行...
如何在其中添加我的 getPrimes 函数？最好的方法肯定是将其转换为生成器方法并执行Observable.from(getPrimes())，但目前似乎不起作用。
库primes-generator 简化了这一点。

标签： javascript angular observable rxjs

【解决方案1】：

您可以使用Observable.range() 运算符生成数字序列，然后使用您的 isPrime() 方法过滤序列。

您也可以使用Observable.generate()。但我认为 Angular 还不支持它。

这是一个示例代码 (plunker) 。您只需要更改 isPrime() 实现和数字范围。

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

【讨论】：