Angular2可观察到的流到* ngFor

Question

我有这个代码：

objs = []

getObjs() {
    let counter = 0
    this.myService.getObjs()
      .map((obj) => {
        counter = counter > 5 ? 0 : counter;
        obj.col = counter;
        counter++;
        return view
      })
      .subscribe((obj) => {
          console.log(obj);
          this.objs = obj;
          // I tried this too :
          // this.zone.run(() => {
          //   this.objs.push(obj);
          // });
    }
    , (err)=> console.warn('error in stream', err));
}

this.myService.getObjs是侦听SSE事件的流。 如果有帮助，下面是代码：

  getObjs(){
      var es = new EventSource(this.API + '/stream');
      return Observable.create((observer: any) => {
            es.onmessage = (event) => {
                let msg = JSON.parse(event.data)[0];
                if(msg === "complete"){
                    console.log("received 'complete' signal from server");
                    es.close();
                    observer.complete();
                }
                observer.next(msg);
            };
        });
  }

我在ngOnInit中调用此方法。 然后，我希望模板在事件到来后立即更新。 范本：

<div class="col-md-2">
    <thumbnail-dirictive [v]="view" *ngFor="let obj of ( objs | column: 0 )"></orbit-thumbnail>
</div>

现在，这将按预期方式记录。 流事件到达并记录。 不会发生的是模板没有顺序更新，即：先到先得。

我知道我可以将流作为命名变量传递，并且在模板中使用异步管道，我还尝试传递toArray（）方法并在所有值到达后获取所有值（在对观察者的完整回调中，我期望如此），我还尝试了将reduce简化为objs被连接到最后但没有任何运气的数组缓冲区...有人可以将不定期的流的工作示例及时发布到ngFor吗？

编辑1（指定角度版本）：package.js：

{
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0"
  }
}

编辑2（列管道代码，已在应用模块中注册）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'column'})
export class columnPipe implements PipeTransform {
  transform(views, col: number): Array {
    return views.filter((view) => {
      return view.col === col;
    });
  }
}

Answer 1

据我所知，您的代码看起来不错。 如果this.objs = obj; 分配正确的值，我会开始寻找其他地方：

• 在创建组件模板之前，将调用ngOnInit 。 但是，如果您没有使用Component的ChangeDetectorRef这应该不会有问题。

• 转储objs ，然后转储objs objs|column:0 ：

   <div class="col-md-2"> {{ objs|json }} {{ objs|column:0|json }} <thumbnail-dirictive ... /> 

  以确保它包含您的想法并确保column管道执行了应做的事情（很难在不知道数据结构的情况下判断它是否正确运行）。

• 在模板中，您具有：

   <div class="col-md-2"> <thumbnail-dirictive ...></orbit-thumbnail> 

  这显然是不正确的。 您确定问题不在这里吗？

如果以上方法均无济于事，请尝试制作jsfiddle的一些基本plnkr，我们将在其中看到它如何失败。