Angular 2异步管道不刷新

Question

我正在尝试从API获取信息，并将数据放入HTML表中。

当我加载组件时，有时表会正确加载，有时会保持空白。 通过在调试器中检查“网络”选项卡，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() {
    }
}

但是，正如您在上面看到的那样，我尝试通过不执行任何操作的（单击）事件向模板添加一个简单按钮。 当我单击此按钮时，表将刷新并正确显示数据。

我不知道此问题是否链接到angular2或rxjs。

谢谢你的帮助。

Answer 1

我通过重新排列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>