（TypeError：在HttpHeaders.applyUpdate处无法读取null的属性“ length”）Angular 5，Http Client

Question

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

这是登录组件

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

这是UserService

@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中不起作用。当Login在其他模块中时，UserService是全局服务。

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

Answer 1

不要在 Header 中设置 Null 值

由于标头中的空值，即可能会出现此问题

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

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

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