【问题标题】:Cannot read property 'length' of null on Angular Service method call?无法在 Angular 服务方法调用上读取 null 的属性“长度”?
【发布时间】:2020-05-30 00:02:55
【问题描述】:

我正在修改一个现有的 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: 无法读取 null 的属性“长度”HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:199) 在 http.js:170 在 Array.forEach () 在 HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:170) 在 HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:235) 在 Observable._subscribe (http.js:1435) 在 Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43) 在 Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29) 在 MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18) 在 Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)

这似乎是标题问题或一些订阅/可观察错误,但我找不到错误在哪里。

  • 我的代码有问题吗?
  • 可能是现有的拦截器正在修改请求?

请注意,异常是在发出请求之前抛出的,因此在创建该请求时一定是客户端问题。

编辑:

这是我找到的唯一拦截器:

@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)
    }
  }
}

【问题讨论】:

  • 你有http拦截器吗?
  • 问题已编辑@Argon
  • 检查服务文件中httpClient的导入。 import { HttpClient, HttpHeaders } from '@angular/common/http';

标签: angular typescript rxjs angular-http-interceptors


【解决方案1】:

您没有检查“当前”标头是否实际存在于存储中。

let tenantReq = req.clone({ headers: req.headers.set('current', sessionStorage.getItem('current')) })

编辑:一旦您尝试发送带有空值标​​头的请求,HttpClient 将抛出错误。尝试将sessionStorage.getItem('current') 替换为静态值并进行测试。

【讨论】:

  • 自成立以来我认为不是这样
  • “设置”是什么意思?他稍后不会重写标题,对我来说它会失败是有道理的,因为其中一个标题是可以为空的。
  • 你能在解释的时候更新你的答案,让他试试
猜你喜欢
  • 1970-01-01
  • 2018-03-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-11
  • 2013-03-21
  • 2015-04-06
相关资源
最近更新 更多