Angular 2 async pipe не обновляется

Я пытаюсь получить информацию из API и поместить данные в таблицу HTML.Angular 2 async pipe не обновляется

Когда я загружаю компонент, иногда таблица загружается должным образом, и иногда она остается пустой. Проверяя вкладку сети в отладчике, API отвечает за каждый запрос. Кроме того, я не получаю никаких ошибок в консоли.

Вот моя служба:

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

Вот компонент, который использует эту услугу:

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

Однако, как вы можете видеть выше, я пытался добавить простую кнопку в шаблон с событием (click), которое ничего не делает. Когда я нажимаю эту кнопку, таблица обновляется и корректно отображает данные.

Я не знаю, связана ли эта проблема с угловыми2 или rxjs.

Благодарим за помощь.

источник

2016-03-27 Kilop

Как-то Угловая не получить уведомление о каком-то событии, чтобы сделать это обнаружение изменений , Вы используете 'Http', как показано в вашем вопросе, или вы действительно используете какую-либо другую библиотеку для извлечения данных с сервера thw? –

Вместо использования '| async', вы можете попробовать 'this._fishtanksService.getFishtanks(). subscribe (value => this.fishtanks = value);' –

Я использую Http, как показано, я попробую с подпиской. – Kilop

Я исправил проблему, переставив ссылку в index.html.

Вот порядок, который сделал это не работает:

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

Вот порядок, который установил его:

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

источник

2016-03-27 21:01:46 Kilop

Angular 2 async pipe не обновляется

ответ

Смежные вопросы