Angular 5 http调用未触发

Question

Http 调用未触发。我写了关于订阅路由参数的调用。调用会在整页重新加载或我第一次单击按钮更改路由时触发。之后，呼叫不会触发。我检查了 chrome 开发工具的网络安全。那里没有电话。

ngOnInit() {
    this.getSlider();
    this.route.params.subscribe(params => {
        this.route.queryParams.subscribe(qParams => {
            this.boxSlug = params.slug;
            if (qParams.box_standard) {
                if (qParams.box_standard === "previous") {

                    console.log('blah blah blah');

                    this.pageType = qParams.box_standard;
                    this.getPreviousBoxes(); //<---method that gets called
                } else if (qParams.box_standard === "box-detail") {
                    this.pageType = "box-detail";
                    this.boxFBIN = qParams.box;
                    this.getBoxDetail(qParams.box);
                } else {
                    this.pageType = "box";
                    if (params.slug && this.pageType === "box") {
                        this.boxSlug = params.slug;
                        this.getBoxTypes(params.slug);
                    }
                }
            } else {
                this.pageType = "box";
                if (params.slug) {
                    this.getBoxTypes(params.slug);
                } else {
                    this.router.navigate(["/box"]);
                }
            }
        });
    });
}

getPreviousBoxes() {
    this.boxService.getPreviousBoxes(this.boxSlug).subscribe(
        response => {

            console.log('preResp--->', response);

            this.previousBoxes = [];
            this.boxChunk = [];
            this.previousBoxes = response.data;
            while (this.previousBoxes.length > 0) {
                this.boxChunk.push(this.previousBoxes.splice(0, 4));
            }
        },
        error => {
            console.error(error.error.message);
        }
    );
}

这是我 BoxService.service.ts 中的 http 调用（不是完整代码）

import { HttpClient, HttpHeaders } from '@angular/common/http';

export class BoxService {

constructor(private _http: HttpClient) { }
private API_URL = environment.API_URL;
private headerDict = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'Access-Control-Allow-Headers': 'Content-Type'
};
private requestOptions = {
    headers: new HttpHeaders(this.headerDict)
};


getPreviousBoxes(boxSlug): Observable<any> {
    return this._http.get(this.API_URL + 'user/box/previous/' + boxSlug, this.requestOptions)
    .map(response => {

        console.log('bbbbbb====>', response);
        console.log('boxSlug====>', boxSlug);

        return response;
    }).catch(this.handleError);
}
}

页面重新加载时的开发工具网络和控制台：

the api call and response

log of the response but array length is 0

如果我在不重新加载的情况下发起呼叫，则会发生以下情况（在清除控制台和网络选项卡后）：

no api call registers in network tab

but somehow i get a response and it gets logged in console

谁能帮我理解问题所在？

Answer 1

试试下面的方法。只需返回服务调用结果而不使用 map 运算符。希望，您正在使用 HttpClientModule

getPreviousBoxes(boxSlug) {
    return this._http.get(this.API_URL + 'users/box/previous' + boxSlug,this.requestOptions);
  }