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>

Angular 2异步管道不刷新

1 个答案: