角度5可观察和递归

Question

我正在尝试使用Angular 5中的RxJs observable来开发一个递归调用url的函数。

api按页向我发送结果，所以我必须发送一个http请求，直到我没有结果。在我的结果中，我有一个＆＃34; next＆＃34;网址。我使用this post来实现这一点，但它不起作用，我的脚本不会停止......

这就是我所做的：

    // service.ts

  getAllProductsByBundle(bundleId) {

        let url = this.getUrl(bundleId);
        url += "/products";

    //url = http://api.test.com/bundle/{bundleId}/products

        let httpParams = new HttpParams();
        httpParams = this.getUrlParameters('GET');

    //url becomes = http://api.test.com/bundle/{bundleId}/products?page=1

      // headers
        var headers = this.setHttpHeaders();

        const getNextByUrl = (nextUrl?: string): Observable<any> => {
            if (nextUrl) {
                url = nextUrl;
            }

            return this.http.get(url, {headers: headers, params: httpParams});
        }

        return getNextByUrl().expand((response) => {
            if (response['products']['_links']['next']) {

                return getNextByUrl(response['products']['_links']['next']['href']);
            }
            else {
                return Observable.empty();
            }
        }).map(result => result );
    }

这里有一个结果样本（json）我得到了：

＆＃13;

＆＃13;

{
	"products": {
		"page": 1,
		"limit": 20,
		"pages": 2,
		"total": 27,
		"_links": {
			"self": {
				"href": "http://api.test.com/bundle/5ad5ea2ce13d707f303be6d2/products?page=1&limit=20"
			},
			"first": {
				"href": "http://api.test.com/bundle/5ad5ea2ce13d707f303be6d2/products?page=1&limit=20"
			},
			"last": {
				"href": "http://api.test.com/bundle/5ad5ea2ce13d707f303be6d2/products?page=2&limit=20"
			},
			"next": {
				"href": "http://api.test.com/bundle/5ad5ea2ce13d707f303be6d2/products?page=2&limit=20"
			}
		},
		"_embedded": {
			"items": [{
				// items from 1 to 20
			}]
		}
	}
}

＆＃13;

＆＃13;

＆＃13;

非常感谢：）

编辑：

    getAllProductsByBundleId(bundleId) {
        let url = this.getUrl(bundleId);
        url += "/products";

        return this.findProductsRecursively(url);
    }

    findProductsRecursively(url) {

        let httpParams = new HttpParams();
        httpParams = this.getUrlParameters('GET');

        // headers
        var headers = this.setHttpHeaders();

        console.log(url);

        return this.http.get(url, {headers: headers, params: httpParams}).flatMap(response => {

      // here the url is good but it's still the same (page=2)
      // the response['products']['_links']['next'] is still the same url
      // it's like the second url is not launch
            console.log("next");
            console.log(response['products']['_links']['next']);

            if (response['products']['_links']['next']) { 
                // there are more levels to go deeper

                console.log("go deeper");
                if (response['products']['_links']['next']['href'])
                    return this.findProductsRecursively(response['products']['_links']['next']['href']);
                else 
                    return Observable.of(response);

            } else { 
                // you hit a leaf, stop recursion here
                return Observable.of(response);
            }
        });
    }

console.log

next
bundle.service.ts:100 {href: "http://api.test.com/bundle/id/products?page=2&limit=20"}
bundle.service.ts:105 go deeper
bundle.service.ts:95 http://api.test.com/bundle/id/products?page=2&limit=20
bundle.service.ts:99 next
bundle.service.ts:100 {href: "http://api.test.com/bundle.../products?page=2&limit=20"}
bundle.service.ts:105 go deeper
bundle.service.ts:95 http://api.test.com/bundle/id/products?page=2&limit=20
bundle.service.ts:99 next

编辑2：this.getUrlParameters（＆＃39; GET＆＃39;）;问题是因为这个函数添加了一个＆＃34; page = 1＆＃34;在我的网址之后。所以我的网址中有page = 2＆amp; ...＆amp; page = 1。

解决方案：Iterating over Promises recursively