如何遍历可观察项中的列表?

时间:2019-02-28 09:43:33

标签: javascript angular

在谈到Angular时,我仍然还是一个初学者,并花了几天的时间寻找解决方案。我正在访问以以下格式返回JSON结果页面的API: {"count": 242, "next": <link to the next page>, "results":[]}

我的get函数如下:

getJournals(searchterm, limit?: number, offset?: number): Observable<any> {
    var endpointurl = this.globalvars.apiv1Url + "search-journal?q=" + searchterm;
    if (limit != null) {
        endpointurl = endpointurl + "&limit=" + limit;
    }
    if (offset != null) {
        endpointurl = endpointurl + "&offset=" + offset;
    }
    return this.http.get(endpointurl).pipe(map((res: Response) => this.extractJournals(res)));
}

提取函数处理结果并将其交给工厂,这样我就得到了适合我的数据模型的日记对象。

private extractJournals(res: Response) {
    let body: any = { count: res["count"], next: res["next"], journals: [] };
    if (body["count"] > 0) {
        for (var index = 0; index < res["results"].length; ++index) {
            var journalInfo: any = res["results"][index];
            this.journalFactory.create(journalInfo, body.journals);
        }
    }

    return body || {};
}

create函数的第二个参数是可选的,并接受列表以将结果推回。 现在是有问题的部分。调用getJournals的页面(日记声明使日记适合ngx-datatable):

getJournals(limit: number, offset: number) {
    this.page.limit = limit;
    this.page.offset = offset;
    this.api.getJournals("", limit, offset).subscribe((result) => {
        console.log(result);
        this.page.count = result["count"];
        if (result["count"] > 0) {
            console.log(result["journals"].length);
            result["journals"].forEach((currentjournal) => {
                console.log(currentjournal);
                var journal: any = {};

                this.rows.push(journal);
            });
            this.rows = [...this.rows];
        }
    });
}

第一个控制台日志返回我期望的结果。我知道它是一个可观察的对象,并且在记录日志时不会返回其中的内容,但是会在我在浏览器中单击它时得到评估。日志以我想要的形式包含我的所有日​​记,一切正常。第二个日志返回“ 0”,而第三个日志永不调用。 根据我的理解,如果我的可观察对象本身返回一个列表,则迭代将起作用,但并非如此,因为我想对嵌套在result(?)中的列表进行迭代。有趣的是,result [“ count”]可以随时从API返回正确的结果,并将其填充在extractJournals函数中。我认为这意味着extractJournals填充了body变量,但是不等待for循环返回结果吗?但是它确实会在某些时候处理for循环,因为第一个日志包含for循环结果。

我真的没有主意。我如何使最后一个forEach循环正常工作,因为它显然不等待日记列表填满?我还尝试了索引为btw的常规for循环。

1 个答案:

答案 0 :(得分:0)

利用打字稿编译器可以指出代码中有错字的地方。例如:

let body: {count: number, next: string, journals: Journal[]} = {"count": res["count"], "next": res["next"], "journals": []};


this.journalFactory.create(journalInfo, body.journals);
                                             // ^^^ Please notice typo here

当您向打字稿提供类型信息时,几乎每个IDE和编译过程都会引发错误。