2016-03-27 28 views
0

Bir API'dan bilgi almaya çalışıyorum ve verileri bir HTML Tablosuna koymayı deniyorum.Açısal 2 async borusu yenilenmiyor

Bileşeni yüklediğimde, bazen tablo düzgün yükleniyor ve bazen boş kalıyor. Hata ayıklayıcısındaki ağ sekmesini kontrol ederek, API her istekte düzgün yanıt verir. Ayrıca konsolda hiç hata alamıyorum. Yukarıda gördüğünüz gibi, ben basit bir düğme eklemek çalıştı, ancak

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

import {Fishtank} from './fishtank'; 
import {FishtanksService} from './fishtanks.service'; 

@Component({ 
    selector: 'fishtanks', 
    templateUrl: `<div> 
        <table class="table table-striped table-condensed"> 
         <thead> 
          <tr> 
           <th>id </th> 
           <th> batchNumber </th> 
           <th> userGroup </th> 
          </tr> 
         </thead> 
         <tbody > 
          <tr *ngFor="#fishtank of fishtanks | async"> 
           <td>{{fishtank.id }}</td> 
           <td> {{fishtank.batchNumber }}</td> 
           <td> {{fishtank.userGroup }}</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <button (click)="click()">Click me</button>` 
}) 

export class FishtanksComponent implements OnInit { 
    constructor(private _fishtanksService: FishtanksService) { 
    } 

    public fishtanks: Observable<Fishtank[]>; 

    public getFishtanks() { 
     this.fishtanks = this._fishtanksService.getFishtanks(); 
    } 

    ngOnInit() { 
     this.getFishtanks() 
    } 
    public click() { 
    } 
} 

: Burada

import 'rxjs/Rx'; 
import {Injectable} from 'angular2/core'; 
import {Http, Response} from 'angular2/http'; 

import { Fishtank } from './fishtank'; 

@Injectable() 
export class FishtanksService { 
    constructor(private _http: Http) { 
    } 

    getFishtanks() { 
     var response = this._http.get("http://localhost:10239/api/fishtank"); 
     return response.map((response: Response) => <Fishtank[]>response.json().fishtanks); 
    } 
} 

bu hizmeti kullanan bir bileşendir: Burada

benim hizmetidir Hiçbir şey yapmayan bir (tıklama) olayı ile şablon. Bu düğmeye tıkladığımda, tablo yenilenir ve verileri doğru şekilde gösterir.

Bu sorunun angular2 veya rxjs'ye bağlı olup olmadığını bilmiyorum.

Yardımlarınız için teşekkürler.

+0

nasılsa Açısal yapmak için bazı etkinlik hakkında bildirim almaz o değişim algılama var Burada

işe yapılan sırasıdır . Sorunuzda gösterildiği gibi 'Http' kullanıyor musunuz ya da thw sunucusundan veri almak için başka bir kütüphane kullanıyor musunuz? –

+0

Kullanmak yerine | async 'boru deneyebilirsiniz bu._fishtanksService.getFishtanks(). subscribe (value => this.fishtanks = değer); –

+0

Ben Http kullanın, ben abone ile deneyin. – Kilop

cevap

2

Sorunu index.html dosyasında yeniden düzenleyerek sorunu çözdüm. İşte

<script src="libs/angular2-polyfills.js"></script> 
<script src="libs/es6-shim.min.js"></script> 
<script src="libs/system-polyfills.js"></script> 
<script src="libs/shims_for_IE.js"></script> 
<script src="libs/system.js"></script> 
<script src="libs/rx.js"></script> 
<script src="libs/angular2.dev.js"></script> 
<script src="libs/router.dev.js"></script> 
<script src="libs/http.dev.js"></script> 

düzelttim sıradır:

<script src="libs/es6-shim.min.js"></script> 
<script src="libs/system-polyfills.js"></script> 
<script src="libs/shims_for_ie.js"></script> 
<script src="libs/angular2-polyfills.js"></script> 
<script src="libs/system.js"></script> 
<script src="libs/rx.js"></script> 
<script src="libs/angular2.dev.js"></script> 
<script src="libs/router.dev.js"></script> 
<script src="libs/http.dev.js"></script>