Question

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

这是我的component.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()功能更新，在numberofPages()之后致电http.get，但我收到同样的错误。

    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)中收到错误，因为您的代码中没有任何内容可确保subscribe的{{1}}回调已完成首先执行。

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

您可以通过初始化http.get来消除错误：

getdata

至少这种方式getdata: any[] = [];将首先返回0而不是失败并出现错误。在错误规避的情况下，一旦收到numberOfPages()响应，这甚至可以从0正确更新到正确的页数。

在Angular 2

1 个答案: