如何捕获HttpErrorResponse的状态并在angular组件中显示
在Angular组件中捕获HttpErrorResponse的状态并进行显示可以通过以下步骤实现：
- 首先，在你的Angular组件中引入HttpClient模块，并注入HttpClient服务，确保你可以发送HTTP请求。
import { HttpClient, HttpErrorResponse } from '@angular/common/http';- 在组件的构造函数中注入HttpClient服务。
constructor(private http: HttpClient) { }- 在需要发送HTTP请求的地方，使用HttpClient的方法发送请求，并使用.subscribe()方法订阅返回的Observable。在.subscribe()方法中，可以处理成功和失败的回调函数。
this.http.get('your-api-endpoint').subscribe(
(response) => {
// 处理成功的响应
},
(error: HttpErrorResponse) => {
// 处理错误的响应
console.log('Error status:', error.status);
console.log('Error message:', error.message);
}
);- 在错误的回调函数中，你可以获取到HttpErrorResponse对象，它包含了错误的相关信息，如状态码（status）、错误信息（message）等。
- 然后，你可以将获取到的错误信息展示在你的Angular组件中，例如，可以在组件的模板中添加一个错误信息的变量，并在错误的回调函数中将错误信息赋值给它。
errorMessage: string;
this.http.get('your-api-endpoint').subscribe(
(response) => {
// 处理成功的响应
},
(error: HttpErrorResponse) => {
// 处理错误的响应
console.log('Error status:', error.status);
console.log('Error message:', error.message);
this.errorMessage = error.message; // 将错误信息赋值给errorMessage变量
}
);- 最后，在组件的模板中，可以使用插值绑定或者其他方式将错误信息展示出来。
<div *ngIf="errorMessage">{{ errorMessage }}</div>通过以上步骤，你可以在Angular组件中捕获HttpErrorResponse的状态，并将错误信息显示出来。这样，当HTTP请求发生错误时，用户就能够看到相应的错误提示信息。
对于这个问题，腾讯云提供了云函数 SCF（Serverless Cloud Function）服务，它是无服务器计算服务，用于快速构建和部署云原生应用。你可以使用腾讯云 SCF 来托管你的后端逻辑，并与 Angular 前端进行通信。具体产品介绍及更多信息，请参考腾讯云 SCF。
相关·内容
我有一个小问题在Angular5当我尝试连接我的帐户，如果我有一个错误，如错误的密码在浏览器控制台，我也有关于我的服务器(500)的信息，我不想在浏览器的控制台中显示此信息。如何在控制台的浏览器中取消激活此消息。
err => {
if( err instanceof HttpErrorResponse ) {
if (err.status === 401) {
this._router.navigate(['/login'])
}
}
}
浏览 0提问于2018-05-14得票数 1
1回答
我使用本站点中给出的代码创建了一个datatable。url为：
在这段代码中，要在表中显示的数据是硬编码的，但我想显示一个从api获取的json数据。
我已经创建了一个用于从api获取数据的服务组件，但我觉得在datatable中实现这个json数据很困难。
如何在数据表中使用它来显示所有的json数据。
my service component
</
bloghttpservice.ts
import { Injectable } from '@angular/core';
import { HttpClient, Http
浏览 13提问于2019-07-12得票数 3
回答已采纳
1回答
在这里，我在App.Component.ts中订阅通知服务的通知$。每件事情都很好，我在ngOnInit of App.Component.ts中改变了值，但是它的视图没有相应地呈现/更新。
但是，当转到另一个视图上时，我发现视图已经发生了相应的变化(但同时它的值也发生了变化)。
App.Component.ts :
export class AppComponent implements OnInit {
notification: string;
public showNotification: boolean = true;
constructor(pr
浏览 0提问于2018-06-16得票数 3
回答已采纳
我很抱歉，在精炼我的搜索字符串之后，我找到了一个具有类似请求和答案的问题：
我正在工作和练习，这要求我创建一个表单，其中第1列中有3个输入，第2列中有一个HTML表。
第2列的HTML使用外部JSON数组填充。但是，我试图完成的是将用户提交的数据附加到新行中当前表的末尾。
我在页面上有表单和表格组件，并且分别工作。
问题:在我的研究中，我遇到了在没有子父关系的组件之间共享数据的服务选项。这是实现这一目标的最佳方式吗？
下面是我的组件文件：
task-table.component.ts
import { Component, OnInit } from '@angular/core&#
浏览 2提问于2019-05-20得票数 0
1回答
我正在尝试使用ng2-smart-table。问题是，我不知道如何在HTML中显示从API中获取的数据。
我生成model.ts
export class Clients {
id:number;
name:string;
phone:string;
address:string;
type:string;
account:number;
nots:string;
branchId:number;
}
在我的service.ts中，我创建了一个从API获取数据的方法，如下所示：
import { Injectable } from
浏览 2提问于2019-09-29得票数 0
回答已采纳
我的角度项目中有一个拦截器代码，它显示了api响应的警报，我想用angular2-通知来替换它。
app.component.html
<router-outlet><app-spinner></app-spinner></router-outlet>
app.interceptor.ts
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse, HttpResponse } from '@angular/common/http
浏览 3提问于2018-06-05得票数 0
回答已采纳
我有一个包含电影列表的movies.json，我想要创建一个MoviesServices来获取我想要的数据。
我的MoviesServices：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
ex
浏览 0提问于2018-11-06得票数 4
回答已采纳
4回答
Im使用:角V6.1.0，角材料V6.4.1
我试图捕捉HTTP错误并使用MatSnackBar显示它们。我试图在我的应用程序的每个组件(其中有一个http请求)中显示这一点。以避免重复的代码
否则，我应该在每个组件中重复相同的代码，以显示插入错误的MatSnackBar。
这是我的服务：
import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
// import { HttpClient, HttpErrorR
浏览 3提问于2018-11-04得票数 5
显然，throwError(error)现在不受欢迎了。VS代码的IntelliSense表示throwError(() => new Error('error')。new Error(...)只接受字符串。在不破坏我的HttpErrorHandlerService的情况下替换它的正确方法是什么？
http-error.interceptor.ts
import { Injectable } from '@angular/core';
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
Htt
浏览 1提问于2021-08-04得票数 40
回答已采纳
我试图使用ngModel绑定一个属性，但是它一次又一次地产生错误。我在组件中定义了convert方法，它需要一个parameter。我不明白为何会出现问题。html文件代码
<input type="text" [(ngModel)]="my_message" />
<button (onclick)="convert({'message':my_message})">Submit</button>
组件类代码
import { Component, OnInit } from '@an
浏览 1提问于2020-06-10得票数 0
回答已采纳
下面是我在angular和node js中的代码。其中我尝试使用post请求，一旦成功，响应就意味着它应该重定向到特定的url。但不幸的是，我的angular应用程序无法处理该响应。
在controller.js中：
sandbox.saveSandboxOrder(sandboxDetails, order_id).then(ordersave_success = > {
if (ordersave_success) {
response.redirect(200, ordersave_success.redirectUrl);
浏览 10提问于2019-11-27得票数 0
简单的问题。我从web服务中得到了以下响应，我在chrome控制台上观察到了它。如何将其部署到angular 4中的Html元素上？我试图转换成JSON，但我遇到了另一个问题，所以我决定使用我在parseString之后收到的东西。
我想要做的就是，使用Angular在html元素中显示这些字段。现在，我只有component.ts文件，并试图用html做一些事情，但无法弄清楚。
import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { ErrorObs
浏览 0提问于2017-10-19得票数 0
1回答
我正在用Angular 8编写一个web应用程序，它从.NET核心后端获得数据。它使用JWT令牌进行身份验证，如果令牌无效，后端会给出一个401 Not Authorized错误代码。为了在Angular中正确处理这个问题，我添加了一个http拦截器： import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpErrorResponse,
HttpResponse
}
浏览 24提问于2019-09-17得票数 0
回答已采纳
我正在尝试重新创建一个用于练习学习的示例angular应用程序，但我得到了一个错误消息：“属性'name‘不存在于类型’Employee[]‘上。”我已经创建了一个接口'Employee‘，它有一个字符串变量'name’。
export interface Employee {`
id: number;
name: string;
email: string;
jobTitle: string;
phone: string;
imageUrl: string;
浏览 0提问于2021-10-06得票数 1
在使用HttpClient的Angular6中，有没有捕获GET net::ERR_CONNECTION_REFUSED错误/异常的方法？对于典型的http请求，我通常会看到一个类型为HttpErrorResponse...for的错误/异常，例如404not Found。但是，对于端口或远程服务不存在的某些http请求以及网络问题，我在浏览器控制台中看到两个错误/异常：
a.)获取 net::ERR_CONNECTION_REFUSED { ... }
然后是我的代码捕捉到的第二个问题：
b.)HttpErrorResponse{headers: HttpHeaders，status: 0，
浏览 1提问于2018-12-21得票数 2
5回答
我有一个用角表示的服务，它从API调用数据。那么，当我试图显示数据时，它没有显示？
服务
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
@Inje
浏览 5提问于2019-11-29得票数 7
回答已采纳
1回答
如果任何api返回一个401错误response.And来执行我拦截每个请求的操作，我希望用户自动注销。一旦错误代码到达401，我将清除本地存储中的jwt令牌，并且auth保护将防止用户在实现拦截器后跳转到该route.But (示例非常少，文档中也没有提到)，我无法预先命中任何HTTP是我的code.Thanks。
import { Injectable, Injector } from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorRespons
浏览 0提问于2018-10-05得票数 5
回答已采纳
我有一个Angular应用程序，它有一个配置为捕获服务器端验证错误的HttpInterceptor。
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request)
.pipe(
retry(1),
catchError((error: HttpErrorResponse) => {
if (error.status === 400) {
浏览 2提问于2019-05-03得票数 0
5回答
我有一个course-detail组件，它包含来自我的后端应用程序的数据(名为course)，我想将这些数据传递给另一个与该组件无关的组件(course-play)。我想在这两个组件中显示我从后端获得的相同数据。以下是相关文件：
app-routing-module：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CourseListComponent } from './cours
浏览 2提问于2018-07-19得票数 4
我的小组和我正在建立一个网站使用角为客户端。我们正试图使用AuthGuard来封锁线路，但很难映射到主题。
LoginService：
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Inject } from '@angular/core';
import { Injectable } from '@angular/core';
import { Subject, throwError } from 'rxjs';
im
浏览 4提问于2022-02-14得票数 0
下面的问题是关于Angular 5的。 我有一个表单组件MyForm.Form.ts，它显示在多个父组件中。但是，有两个表单控件(让我们称它们为agency_email和delivery_details)，它们只需要在两个父表单中显示，并且只在显示时才需要验证。如何才能做到这一点？
浏览 12提问于2019-10-09得票数 0
我有以下HttpInterceptor代码，但是我不能让它的响应拦截器部分工作： import { Injectable } from '@angular/core';
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
import { Observable } from 'rxjs';
import { UserService } from
浏览 17提问于2019-03-02得票数 0
3回答
我写了一个Angular4 http拦截器。它可以很好地处理请求和非错误响应。例如，我不能拦截401，拦截器甚至没有被触发。有没有人知道如何拦截401，例如转发到登录页面？
下面是我的代码：
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observabl
浏览 1提问于2017-10-15得票数 0
我对角度拦截器截取方法进行了Karma/Jasmine单元测试，该方法返回rxjs Observable。如果成功时出现一些错误，回调单元测试将显示为已通过，即使它应该失败。代码： 被测方法： intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
...
return next.handle(req);
} 测试： it("some test desc", () => {
const head
浏览 18提问于2019-02-26得票数 2
1回答
我试图在角6中创建动态路由，我有一个JSON文件，其中我指定了路径和组件名称，并试图加载到应用程序路由文件中。
JSON
[{
"path": "home",
"component": "HomeComponent",
"Text" :"HomePage"
},
{
"path": "contactus",
"component": "ContactUsComponent",
&#
浏览 0提问于2019-03-12得票数 1
如何将文件的值转换为service.The文件的值是动态的。 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { HttpClient, HttpResponse, HttpRequest,
HttpEventType, HttpErrorResponse } from
浏览 14提问于2019-01-04得票数 0
我试图使用来自HttpInterceptor的单例服务，以便有一个自动繁忙的加载指示符。
但是，问题是拦截器不使用服务，但不使用服务。
我在HttpInterceptor的构造函数中引用服务如下：
constructor(private htbs: HttpBusyService) {}
在应用程序模块中，服务和HttpInterceptor提供如下所示：
providers: [
HttpBusyService,
{ provide: LocationStrategy, useClass: HashLocationStrategy},
{ provide: HTTP_
浏览 1提问于2017-12-04得票数 1
回答已采纳
我正在以JSON的形式从服务器中提取数据，并将其添加到HTML表中。我希望将表行修正为5，只有JSON中的前5值才能使用角进入表。如果可用的数据少于5个，请用“-”填充表列。
component.ts
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-orderbook',
templateUrl: './o
浏览 3提问于2020-09-30得票数 1
回答已采纳
1回答
我有一个基于令牌的授权。授权发生得很好，没有错误。但现在需要以某种方式显示授权用户的数据。请告诉我如何在客户端正确实现配置文件(Angular 6)？我有这个服务器：
控制器：
const db = require('../config/db.config.js')
const User = db.user
const errorHandler = require('../utils/errorHandler')
module.exports.getProfile = async function(req, res) {
try {
aw
浏览 0提问于2018-10-28得票数 0
如何仅在活动的文本框中显示旋转轮？
我使用angular 5，这是我的代码，我有N个文本框
<div class="input-group-addon" style="background-color: #fff !important" *ngIf="searching "><span><i class="fa fa-spinner fa-spin"></i></span></div>
浏览 0提问于2018-06-17得票数 1
2回答
既然在angular.json的styles[]中引用的样式表不能在组件的styleUrls[]装饰器中引用，那么从父组件的主CSS文件中设置父组件中的子元素样式的准确方法是什么？
例如。
app-component > parent-component > child-component
我希望能够在不影响angular.json文件中引用的样式表的情况下，对父组件的模板中的任何内容(包括子组件的HTML选择器中的代码)设置样式。(styles.css)
我已经尝试在父组件的TS文件的装饰器中设置这些属性中的任何一个...
encapsulation : ViewEncapsul
浏览 0提问于2019-11-06得票数 0
2回答
我正在尝试捕获由Angular中的Web API抛出的错误，并希望在某些情况下显示用户友好的错误消息。根据下面的响应正文，我如何访问字符串"PE和所有者签名必须附加到提交的状态“？
{
"data": {
"model.WorkflowStepId": [
"PE and Owner Signature must be attached for a status of Submitted"
]
},
"exceptionType": "FieldValidation"
浏览 13提问于2019-07-17得票数 1
回答已采纳
在角6中，我有一个ConfigService，它要求构造函数能够很好地工作：
import { HttpClient, HttpHeaders, HttpErrorResponse } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, Subscribable, Subscription } from "rxjs";
@Injectable()
export class ConfigService {
浏览 0提问于2018-08-27得票数 0
回答已采纳
我正在尝试为登录页面编写我的第一个测试用例。我的ts文件如下所示：
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {AuthenticationService} from '../../../services/authenticat
浏览 2提问于2021-07-24得票数 1
回答已采纳
getRequest(url : string,retryCount = 2) {
return new Observable(response => {
return this.http.get<any>(url)
.pipe(
retryWhen((error) => {
return error.pipe(
concatMap((e, i) => {
if (i >= retryCount) {
retu
浏览 19提问于2020-01-10得票数 1
1回答
我有一个特别的HttpInterceptor
import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor,
HttpRequest} from '@angular/common/http';
import {AuthService} from '../service/auth.service';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core&#
浏览 6提问于2017-09-20得票数 5
回答已采纳
我有这个组件，它将一个方法传递给另一个组件。它就是这样做的
constructor(
public categoryData: CategoryDataService
) {
}
传递该方法的html如下所示：
[list]="categoryData.list"
只要list方法没有参数，它就能正常工作。现在我有了一个有参数的方法，但是我可以从组件获得参数，所以我创建了一个包装器方法，如下所示：
listCriteria() {
this.criteriaData.list(this.category.id);
}
但是，当我添加这个html时：
[list]=&#
浏览 0提问于2018-06-20得票数 1
回答已采纳
我使用的是Angular和TypeScript。在API调用的情况下，我使用了try catch结构来处理错误。如果try块中出现任何错误，那么它根本不会去catch块。应用程序仅在那里终止。
我也尝试过使用throw。以下是示例代码片段，
try {
this.api.getAPI(Id).subscribe( // this.api is my api service and getAPI is present there
(data: any) => {
if (data == null) {
throw 'Empty respon
浏览 5提问于2018-05-23得票数 12
回答已采纳
1回答
如何获得一个页面上所有api调用的总响应时间？当我有一个API调用时，我已经创建了interceptor，下面是interceptor的代码
httpconfig.interceptor.ts:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse, HttpResponse } from '@angular/common/http';
import { Obser
浏览 2提问于2020-05-06得票数 1
1回答
请建议如何在输入字段中输入某项，然后在enter press.But中添加项目--这些是不同的组件，.I希望使用@Input、@Output、EventEmitter将输入字段值共享给不同的组件。
我做了一个部件。<todo></todo>
这是ts文件
import { Page,NavController,Modal } from 'ionic-angular/index';
import { Component, Input, Output, EventEmitter} from 'angular2/core';
@Compo
浏览 4提问于2016-05-24得票数 0
回答已采纳
我正在开发一个Angular 7应用程序。我添加了一个用户可以点击的图标，当他们点击它时，一个绝对定位的div就会像工具提示一样出现。工具提示被封装在一个角度组件中。 我需要使工具提示消失时，用户点击页面上的任何地方以外的工具提示。似乎我需要以某种方式在整个页面上添加一个通用的事件处理程序来捕获鼠标单击，并以某种方式检查工具提示是否打开，以及单击事件是否在工具提示上，但我不知道如何在Angular的组件模型中做到这一点。 如何使用户在工具提示之外的页面上单击时，工具提示消失？ 我应该补充的是，我不能简单地添加一个不可见的div来覆盖工具提示后面的页面，并监听点击，因为这样用户就不能点击其他页
浏览 16提问于2021-05-08得票数 0
2回答
我试图在服务文件中捕获HTTP消息中的错误。
下面是脚本：
import { Injectable } from '@angular/core';
import { PortfolioEpicModel, PortfolioUpdateStatus } from '../models/portfolio-epic.model';
import { HttpClient, HttpErrorResponse, HttpParams} from '@angular/common/http'
import { config, Observable }
浏览 1提问于2021-08-06得票数 0
您好，我使用的是angular 5，我正在为它编写一个全局处理程序，如下所示。 @Injectable()
export class ErrorsHandler implements ErrorHandler {
constructor(
private injector: Injector,
) { }
handleError(error: Error | HttpErrorResponse) {
const router = this.injector.get(Router);
const zone = this.injector.get(NgZo
浏览 71提问于2018-12-20得票数 9
2回答
我希望将从API获得的json数据传递到数组中，并在模板中显示这些信息，但我不知道如何做到这一点。
此错误出现在我的控制台上：
我的ts文件：
this.api.getJoursFeries(year).subscribe(
(data: feries[]) => {
this.joursFeries = data;
// console.log(data);
}, (error: HttpErrorResponse) => {
console.log(error);
}
)
我的服务档案
浏览 3提问于2022-05-20得票数 -2
3回答
我在使用angular 4的HttpClient get方法时遇到了一个奇怪的问题。
有一些自定义错误消息从后端返回，我应该处理并显示给用户。但是，我在控制台中获得了HttpErrorResponse
HttpErrorResponse:
error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0,
total: 0, type: "error", …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, hea
浏览 3提问于2019-02-28得票数 6
回答已采纳
我的数据没有在postman中发布，而是出现了以下错误：
401 (未经授权) core.js:4002错误HttpErrorResponse{标头: HttpHeaders，状态: 401，statusText：“未经授权”，url：""，ok: false，…}
我的app.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
impo
浏览 6提问于2019-12-12得票数 1
2回答
我是新来的角场！到目前为止，我一直喜欢这种情况，但在接下来的情况下会遇到一些困难。我想在用户单击数据表中带有href标记的特定单元后，将数据从一个组件发送到另一个组件。因此，我创建了以下.ts文件
service.ts
import { Injectable } from '@angular/core';
import { HttpClient,HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
im
浏览 0提问于2019-02-16得票数 2
回答已采纳
HttpErrorResponse状态返回0，而不是angular中的实际状态，但它在浏览器网络选项卡上显示正确的状态。
浏览 55提问于2019-12-17得票数 0
我在角度上很新。我试图从角度上调用我的web方法。我收到一条信息..。当我执行http.get请求时，我的浏览器上。我假设在下面的http.get中有一个错误是我的代码
getProjectDetails() {
return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/Index').pipe(map(
response => {
return response;
}));
}
我试图通过在角中实现手动错误来捕获错误。
private handl
浏览 0提问于2019-09-23得票数 0
回答已采纳
2回答
我尝试将外部JSON文件中的数组数据显示到html表中。我设法读取了控制台日志中的数据，但无法显示数据。我仍然是Angular 7的新手，所以我可能会在编码过程中错过一些重要的东西，而且我对此一无所知。
app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/https';
import { HttpErrorResponse } from '@angular/common/https';
imp
浏览 0提问于2019-04-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
