Angular 2 async pipe aktualisiert nicht

Question

Ich versuche, Informationen von einer API zu erhalten und die Daten in eine HTML-Tabelle zu stellen.

Wenn ich die Komponente lade, wird die Tabelle manchmal korrekt geladen und manchmal bleibt sie leer. Durch das Einchecken der Registerkarte "Netzwerk" im Debugger reagiert die API bei jeder Anforderung ordnungsgemäß. Außerdem bekomme ich keine Fehler in der Konsole.

Hier ist mein Service:

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

Hier ist die Komponente, die diesen Dienst verwendet:

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() { 
    } 
} 

Doch wie Sie oben sehen können, ich die eine einfache Schaltfläche hinzufügen versucht Vorlage mit einem (Klick-) Ereignis, das nichts bewirkt. Wenn ich auf diese Schaltfläche klicke, wird die Tabelle aktualisiert und zeigt die Daten korrekt an.

Ich weiß nicht, ob dieses Problem mit angular2 oder rxjs verknüpft ist.

Danke für Ihre Hilfe.

Answer 1

Ich habe das Problem behoben, indem ich die Referenz in index.html neu angeordnet habe.

Hier ist die Reihenfolge, die es nicht gemacht:

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

Hier ist die Reihenfolge, die es fest:

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