无法在 Angular 服务方法调用中读取 属性 'length' 的 null?
Cannot read property 'length' of null on Angular Service method call?
我正在修改一个现有的 Angular 项目(不是我的),向我的外部 API 添加一个新调用。
这是服务方式:
getUserName(): Observable<any> {
return this.http.get<any>(environment.apiUrl + URLS.USER_NAME)
}
我在 appcomponent.ts 上使用它如下:
this.userService.getUserName().subscribe((name) => {
this.user = name
})
执行时出现以下错误:
core.js:1673 ERROR TypeError: Cannot read property 'length' of null
at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate
(http.js:199)
at http.js:170
at Array.forEach ()
at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init
(http.js:170)
at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach
(http.js:235)
at Observable._subscribe (http.js:1435)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe
(Observable.js:43)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
(Observable.js:29)
at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call
(map.js:18)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
(Observable.js:24)
好像是header的问题或者是subscribe/observable的错误,但是我找不到错误的地方。
- 我的代码有问题吗?
- 可能是现有拦截器正在修改请求?
请注意,异常是在发出请求之前抛出的,因此在创建该请求时一定是客户端问题。
编辑:
这是我找到的唯一拦截器:
@Injectable({
providedIn: 'root'
})
export class TenantHttpInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.indexOf(environment.apiTFSmin) === -1) {
let tenantReq = req.clone({ headers: req.headers.set('current', sessionStorage.getItem('current')) })
if (sessionStorage.getItem('tenant') != null && sessionStorage.getItem('newTenant') == null) {
tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Tenant', sessionStorage.getItem('tenant')) })
} else if (sessionStorage.getItem('newTenant') != null) {
tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Tenant', sessionStorage.getItem('newTenant')) })
sessionStorage.removeItem('newTenant')
}
if (req.method === 'POST' || req.method === 'PUT') {
tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Content-Type', 'application/json') })
}
return next.handle(tenantReq)
} else {
const tenantReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + btoa('pescanilla-ext:m12345678*')) })
// const tenantReq = req.clone()
return next.handle(tenantReq)
}
}
}
您没有检查 'current' header 是否实际存在于存储中。
let tenantReq = req.clone({ headers: req.headers.set('current', sessionStorage.getItem('current')) })
编辑: 一旦您尝试发送具有空值的 header 请求,HttpClient 将抛出错误。尝试用静态值替换 sessionStorage.getItem('current')
并测试它。
我正在修改一个现有的 Angular 项目(不是我的),向我的外部 API 添加一个新调用。
这是服务方式:
getUserName(): Observable<any> {
return this.http.get<any>(environment.apiUrl + URLS.USER_NAME)
}
我在 appcomponent.ts 上使用它如下:
this.userService.getUserName().subscribe((name) => {
this.user = name
})
执行时出现以下错误:
core.js:1673 ERROR TypeError: Cannot read property 'length' of null at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:199) at http.js:170 at Array.forEach () at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:170) at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:235) at Observable._subscribe (http.js:1435) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29) at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)
好像是header的问题或者是subscribe/observable的错误,但是我找不到错误的地方。
- 我的代码有问题吗?
- 可能是现有拦截器正在修改请求?
请注意,异常是在发出请求之前抛出的,因此在创建该请求时一定是客户端问题。
编辑:
这是我找到的唯一拦截器:
@Injectable({
providedIn: 'root'
})
export class TenantHttpInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.indexOf(environment.apiTFSmin) === -1) {
let tenantReq = req.clone({ headers: req.headers.set('current', sessionStorage.getItem('current')) })
if (sessionStorage.getItem('tenant') != null && sessionStorage.getItem('newTenant') == null) {
tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Tenant', sessionStorage.getItem('tenant')) })
} else if (sessionStorage.getItem('newTenant') != null) {
tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Tenant', sessionStorage.getItem('newTenant')) })
sessionStorage.removeItem('newTenant')
}
if (req.method === 'POST' || req.method === 'PUT') {
tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Content-Type', 'application/json') })
}
return next.handle(tenantReq)
} else {
const tenantReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + btoa('pescanilla-ext:m12345678*')) })
// const tenantReq = req.clone()
return next.handle(tenantReq)
}
}
}
您没有检查 'current' header 是否实际存在于存储中。
let tenantReq = req.clone({ headers: req.headers.set('current', sessionStorage.getItem('current')) })
编辑: 一旦您尝试发送具有空值的 header 请求,HttpClient 将抛出错误。尝试用静态值替换 sessionStorage.getItem('current')
并测试它。