首页 文章

Angular2可观察流到* ngFor

提问于
浏览
0

我有这个代码:

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()方法,并在它们全部到达时获取所有值(在完全回调到观察者时我期望的),我也试过减少到一个数组缓冲区,其中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(列管道代码,在app模块中注册):

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

1 回答

  • 0

    据我所知,你的代码看起来很好 . 如果 this.objs = obj; 分配了正确的值,我会开始寻找其他地方:

    在创建组件模板之前调用

    • ngOnInit . 然而,这不应该与Component的 ChangeDetectorRef 一起播放 .

    • 转储 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,我们可以看到它是如何失败的 .

相关问题