（类型错误：无法在 HttpHeaders.applyUpdate 中读取 null 的属性“长度”）Angular 5，Http 客户端

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

这是用户服务

@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 位于不同的模块中。

我还在 app.module 和登录模块中添加了 HTTPClientModule。

Answer 1

不要在标题中设置 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)
    })
}

Answer 2

尝试这样：

服务.ts

login(credentials): Observable<any> {
    return this.http.post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
    }).map(data => data.json())
}

组件.ts

onLogin(credentials) {
    this.userService.login(credentials)
        .subscribe(data => {
            console.log('data', data);
        }, (error) => {
            console.log('error', error);
        })
}