等待函数在angular4中完成

我有一部分代码无法正常工作

challengeService.getChallenge(1,this.navParams.get("val1",val2))
    .map(res => res.json())
    .catch(err =>  {

      alert('UI error handling');
      alert(err);
      return Observable.throw(err); // observable needs to be returned or exception raised
    })
    .subscribe((data) => {
      this.challenge = ((data[0]));
    });
return this.challenge;

它与我的challengeservice对话，代码如下：

getChallenge(val1, val2)
{
    this.storage.ready().then(() => {
        this.storage.get('jwt').then((val) => {

            let authHeader = new Headers();

            authHeader.append('x-access-token', val);

            this.challenges =  this.http.get('http://localhost:8080/api/val3/'+val1+'/'+val2+'', {
                headers: authHeader
            });
        });
    });
    return this.challenges;
}

在代码的第一部分中，我现在得到一个映射错误（cannot.map on undefined），因为我的challenges数组显然是空的。 当我将return语句放在存储括号中时，程序会唠叨不返回数组，但不返回任何内容（void）。如何让challengepage等待challengeservice从api获取数据并正确填充数据

---

提前感谢

考虑更改http调用的顺序和组织，以便更紧密地遵循常规做法

如果未使用新的HttpClient，则服务代码通常如下所示：

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

getProducts（）：可观察{
返回此。\ http.get（此。\产品URL）
.map（（response:response）=>response.json（））
.do（data=>console.log（'All:'+JSON.stringify（data）））
.接住（这个.把手错误）；
}

请注意，这就是响应映射发生的地方。（我知道您需要一些关于存储检查的其他代码……但这显示了地图的常用方式。）

组件代码如下所示：

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

ngOnInit（）：void{
这是._productService.getProducts（）
.subscribe（products=>this.products=products，
error=>this.errorMessage=error）；
}

---

这就是处理订阅的地方。

考虑更改http调用的顺序和组织，以便更紧密地遵循常规做法

如果未使用新的HttpClient，则服务代码通常如下所示：

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

getProducts（）：可观察{
返回此。\ http.get（此。\产品URL）
.map（（response:response）=>response.json（））
.do（data=>console.log（'All:'+JSON.stringify（data）））
.接住（这个.把手错误）；
}

请注意，这就是响应映射发生的地方。（我知道您需要一些关于存储检查的其他代码……但这显示了地图的常用方式。）

组件代码如下所示：

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

ngOnInit（）：void{
这是._productService.getProducts（）
.subscribe（products=>this.products=products，
error=>this.errorMessage=error）；
}

---

这就是处理订阅的地方。

所以基本上你是说，使用HttpClient？不，这根本不是我要说的。代码与HttpClient非常相似。。。你不需要

.map

。更改为

HttpClient

不会对您遇到的问题产生任何影响。因此，基本上您是说，使用HttpClient？不，这根本不是我要说的。代码与HttpClient非常相似。。。你不需要

.map

。更改为

HttpClient

不会对您遇到的问题产生任何影响。