Angular2-捕获错误并将其显示在视图中答案

【问题标题】：Angular2- Catch error and display it in viewAngular2-捕获错误并将其显示在视图中
【发布时间】：2017-08-31 04:33:32
【问题描述】：

我有一个执行 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)
    );
});

我可以在控制台中看到错误如何在视图中显示。

错误

【问题讨论】：

标签： angular api exception

【解决方案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());
        });
    }

【讨论】：

我想显示图片中提到的错误正文。
响应状态：400 对 URL 的错误请求：api.stackexchange.com//2.2/search/…!*L7QmTklW(QkSp_f 我将其视为 errorMessage 而不是 _body
您需要按照上面的说明从服务中返回错误
@Sammy 有帮助

【解决方案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>

【讨论】：