Angular2观察到的流* ngFor

我有这样的代码：Angular2观察到的流* ngFor

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（列管码，在应用模块注册）：

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

来源

2016-09-23 Francisco

如果使用异步管道，它必须提供数组流。 – 2016-09-23 14:26:16

@torazaburo异步管道没有解决问题。 – Francisco

你从地图而不是'obj'返回“视图”？ – BeaverusIV

据我可以告诉你的代码看起来不错。如果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，在这里我们可以看到它的失败。

来源

2016-09-23 14:18:37 martin

谢谢，但这不是错误，只是一个错字...缩略图 - dirictive应该缩略图 - dirictive关闭。 – Francisco

然后创建plnkr或jsfiddle，否则不可能帮到你。 – martin

Angular2观察到的流* ngFor

回答

相关问题