(类型错误:无法在 HttpHeaders.applyUpdate 处读取 null 的属性“长度")Angular 5，Http 客户端 [英] (TypeError: Cannot read property 'length' of null at HttpHeaders.applyUpdate) Angular 5, Http Client

问题描述

我在服务中发出 http 请求时收到此响应.

I'm getting this reponse when making an http request in service.

这是登录组件

export class LoginComponent {
  credentials: Credentials;

  constructor(
    private auth: AuthService,
    @Inject(UserService) private userService: UserService,
    @Inject(HttpClient) private http: HttpClient,
    private auth0: Auth0Service
  ) {}

  onLogin(credentials) {
    const sendReq = this.userService.login(credentials);
}

我在 App.module 的提供者中添加了 UserService

I've added UserService in providers in App.module

这是用户服务

@Injectable()
export class UserService {
  constructor(
    @Inject(Auth0Service) private authService: Auth0Service,
    protected http: HttpClient // @Inject(HttpClient) protected http: HttpClient
  ) {}
  login(credentials): Observable<any> {
    console.log(credentials);
    console.log(credentials.username);
    this.http
      .post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
      })
      .subscribe(
        data => {
          console.log(data);
        },
        err => {
          console.log("Something went wrong!");
          console.log(err);
        }
      );
    return credentials;
    // this.auth.login(credentials);
  }
}

这是控制台

    at MergeMapSubscriber._innerSub (mergeMap.js:138)
    user.service.ts:14 
{username: "hamzakpt", password: "hamza"}
    user.service.ts:15
 hamzakpt
    user.service.ts:26 Something went wrong!

    user.service.ts:27
 TypeError: Cannot read property 'length' of null
        at HttpHeaders.applyUpdate (http.js:308)
        at eval (http.js:255)
        at Array.forEach (<anonymous>)
        at HttpHeaders.init (http.js:255)
        at HttpHeaders.forEach (http.js:354)
        at Observable.eval [as _subscribe] (http.js:2153)
        at Observable._trySubscribe (Observable.js:172)
        at Observable.subscribe (Observable.js:160)
        at subscribeToResult (subscribeToResult.js:23)
        at MergeMapSubscriber._innerSub (mergeMap.js:138)

同样的 get 请求在 LoginComponent 中有效，但在 UserService 中无效.UserService 是全局服务，而 Login 位于不同的模块中.

The same get request works in LoginComponent but not in UserService. UserService is global service while Login is in a different module.

我还在 app.module 和 Login Module 中添加了 HTTPClientModule.

I've also added HTTPClientModule in app.module and Login Module.

推荐答案

不要在Header中设置Null值

这个问题可能是由于header中的空值，即

Don't set Null value in Header

This problem may occur due to null value in header i.e.

cloned = req.clone({
    headers: req.headers.append('token', token) // i.e. token is null
})

要解决此问题，请在设置到标头之前检查变量，即

to fix this, check variable before setting into header i.e.

if (token) {
    cloned = req.clone({
        headers: req.headers.append('token', token)
    })
}

这篇关于(类型错误:无法在 HttpHeaders.applyUpdate 处读取 null 的属性“长度")Angular 5，Http 客户端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！