Angular2-捕獲錯誤並將其顯示在視圖中

Question

我有一個執行get請求並引發錯誤的服務。

service.ts

return this.http.get(/apiUrl) 
.map(
    (response: Response) => { 
     const items = response.json(); 
     return items; 
    }) 
    .catch(
     (error: Response) => { 
     return Observable.throw(error); 
    }); 
} 

我其訂閱到組分和我想顯示在視圖中的錯誤。我搜索這個異常處理，但我無法得到相關的答案，我該怎麼做？

component.ts

this.faqService.getServers() 
    .subscribe(
    (data) => { 
     this.item = data.items; 
     console.log(this.item); 
     }, 
     (error) => console.log(error) 
    ); 
}); 

我可以看到控制檯錯誤如何在視圖中顯示它。

錯誤

Answer 1

分配給一個變量，然後顯示

在TS

errorMessage : string; 

，然後聲明一個變量，

this.faqService.getServers() 
    .subscribe(
    (data) => { 
     this.item = data.items; 
     console.log(this.item); 
     }, 
     (error) => { 
     this.errorMessage= error.error_message;    
     } 
    ); 
}); 

，然後在HTML

<h1>{{errorMessage}}</h1> 

您需要從服務返回錯誤，

return this.http.get(/url) 
    .map(
     (response: Response) => {   
      return response.json(); 
     }) 
     .catch(
      (error: Response) => { 
      return Observable.throw(error.json()); 
     }); 
    } 

Answer 2

Service.ts 服務應該像

return this.http.get(/apiUrl) 
.map(
    (response: Response) => { 
     const items = response.json(); 
     return items; 
    }) 
    .catch(
     (error: Response) => { 
     return Observable.throw(error.json()); 
    }); 
} 

您組件應該像。 元器件

errorMessage : string; 

this.faqService.getServers() 
    .subscribe(
    (data) => { 
     this.item = data.items; 
     }, 
     (error) => { 
      this.errorMessage = error.error_message; 
     } 
    ); 
}); 

HTML

<span class="alert">{{errorMessage}}</span>