在 Angular 2 中分页时出现问题

Question

我正在尝试对我正在显示的表格实施分页，但我收到了Cannot read property 'length' of undefined。

这是我的组件.ts

     getdata: any[];
    curPage: number;
    pageSize: number;

    ngOnInit() {

        this.getData();

    }


    getData() {
        let headers = new Headers();
        headers.set('Content-Type', 'application/json');
        let getUrl = 'http://jsonstub.com/v1/configs';
        return this.http.get(getUrl, {headers: headers})
        .subscribe(res => {
            this.getdata  = res.json();
            console.log(this.getdata.length);
        });
    }

    numberOfPages() {
    return Math.ceil(this.getdata.length / this.pageSize);
  };

我的 HTML 如下：

            <tbody>
            <tr *ngFor="let mem of getdata | FilterPipe: queryString | slice: (curPage * pageSize) - pagSize :curPage * pageSize">
                <td>
                    <a (click)="getFormgroup(mem.configName) ? addtionalInfo = true : addtionalInfo = false" class="clickable">{{mem.configName}}</a>
                </td>
                <td>{{mem.sources.length}}</td>
                <td>
                    <span *ngFor="let sourceNames of mem.sources; let last=last">
                        {{sourceNames.sourceId}}<span *ngIf="!last">, </span> 
                    </span>
                </td>
            </tr>
            <p class="pagination">
                <button [disabled] = "curPage == 1" (click)="curPage = curPage - 1">PREV</button>
                <span> Page {{curPage}} of {{ numberOfPages() }}</span>
                <button [disabled] = "curPage >= getdata.length/pageSize" (click) = "curPage = curPage + 1">NEXT</button>
            </p>
        </tbody>

我的getdata 是一个长度为 4 的数组，如下所示。

[
{configName: "A", sources: Array(1), queryTimeThresholdInMs: 0},
{configName: "B", sources: Array(3), queryTimeThresholdInMs: 5},
{configName: "C", sources: Array(2), queryTimeThresholdInMs: 5},
{configName: "D", sources: Array(2), queryTimeThresholdInMs: 0}
]

我认为我的逻辑是正确的，而且我正在对数组执行getdata.length，因此不确定为什么会弹出此错误。

编辑：我通过getdata() 函数更新为在http.get 之后调用numberofPages()，但我得到了同样的错误。

    getData() {
    let headers = new Headers();
    headers.set('Content-Type', 'application/json');
    let getUrl = 'http://jsonstub.com/v1/configs';
    return this.http.get(getUrl, {headers: headers})
    .subscribe(res => {
        this.getdata  = res.json();
        console.log(this.getdata);
    },
    () => {
        this.numberOfPages();
    });

}

Answer 1

这是一个异步时序问题。您在return Math.ceil(this.getdata.length / this.pageSize) 中收到错误，因为您的代码中没有任何内容可以确保来自您的http.get 的subscribe 回调首先完成执行。

确保在http.get 成功执行之前不要调用numberOfPages() 方法。

您可以通过像这样初始化getdata 来消除错误：

getdata: any[] = [];

至少这种方式numberOfPages() 将首先返回 0 而不是因错误而失败。绕过错误后，一旦收到http.get 响应，它甚至可以从 0 正确更新为正确的页数。