Angular：TypeError：订阅（）时无法读取null的属性“长度”答案

【问题标题】：Angular : TypeError: Cannot read property 'length' of null when subscribe()Angular：TypeError：订阅（）时无法读取null的属性“长度”
【发布时间】：2019-04-18 00:25:01
【问题描述】：

我在服务中发出 HTTP 请求时收到此响应：

TypeError: Cannot read property 'length' of null
    at eval (http.js:123)
    at Array.forEach (<anonymous>)
    at HttpHeaders.lazyInit (http.js:117)
    at HttpHeaders.init (http.js:265)
    at HttpHeaders.forEach (http.js:368)
    at Observable.eval [as _subscribe] (http.js:2172)
    at Observable.subscribe (Observable.js:162)
    at eval (subscribeToObservable.js:16)
    at subscribeToResult (subscribeToResult.js:6)
    at MergeMapSubscriber._innerSub (mergeMap.js:127)
ALERT!!!!!

我在加载组件时订阅了 HTTP 请求：

export class TasksComponent implements OnInit {
  currentUser:any;
  username:string=null;
  constructor(private usersService:UsersService) {}
  ngOnInit() {
    this.username=localStorage.getItem('currentUsername');
    console.log(this.username);
    this.usersService.getUserByUsername(this.username)
      .subscribe(data=>{
        console.log(data);
        this.currentUser=data;
      },err=>{
        console.log(err);
        console.log("ALERT!!!!! ");
      })
  }
}

用户服务：

//for getting a user by its username
getUserByUsername(username:string){
  if(this.jwtToken==null) this.authenticationService.loadToken();
    return this.http.get(this.host+"/userByUsername?username="+username
          , {headers:new HttpHeaders({'Authorization':this.jwtToken})}
    );
}

我如何将用户名存储在 localStorage 中，以便我可以使用它来查找具有所有属性的用户：

@Injectable()
export class AuthenticationService {
  private host:string="http://localhost:8080";
  constructor(private http:HttpClient){}
  login(user){
    localStorage.setItem('currentUsername', user.username);
    return this.http.post(this.host+"/login",user, {observe:'response'});
  }
}

My localStorage after a Log In

知道该方法在后端工作，如this picture 你认为问题是什么？是服务注入问题还是依赖关系，还是其他问题？

编辑 loadToken 函数：

loadToken(){
    this.jwtToken=localStorage.getItem('token');
    console.log(this.jwtToken);
    let jwtHelper=new JwtHelper();
    this.roles=jwtHelper.decodeToken(this.jwtToken).roles;
    return this.jwtToken;
}

【问题讨论】：

嗯，很难说，可能是 CORS 问题，因为您的 Web 应用程序可能托管在另一个端口 (4200) 上。或者也许 loadToken() 是异步的，你仍然调用 get-request 而不使用 auth-token。您应该在浏览器中检查网络请求，看看您是否从该请求的后端获取数据...
这不是 CORS 问题，因为我运行其他请求（GET、POST、OPTIONS...）并且它们工作正常，我将在问题中添加 loadToken() 函数。我在浏览器中检查了网络，但我没有从后端获取数据。
什么是 HTTP 代码？ 200？顺便提一句。空响应是 CORS 问题的信号...
登录链接为 200
不，对于你有问题的请求

标签： angular http angular-services

【解决方案1】：

由于您在浏览器的网络面板中没有看到该请求，因此您似乎没有发送该请求。这可能是因为您没有在此行中设置令牌：

if(this.jwtToken==null) this.authenticationService.loadToken();

错误：

TypeError: Cannot read property 'length' of null
    at eval (http.js:123)
    at Array.forEach (<anonymous>)
    at HttpHeaders.lazyInit (http.js:117)
    at HttpHeaders.init (http.js:265)
    at HttpHeaders.forEach (http.js:368)

表示您的 Header (Authorization) 是 null，因此无法读取。

尝试将行更改为：

if(this.jwtToken==null) this.jwtToken = this.authenticationService.loadToken();

现在您应该在网络面板中看到您的请求

或者您可能只是想检查authenticationService 本身的令牌：

if(this.authenticationService.jwtToken==null) this.authenticationService.loadToken();
    return this.http.get(this.host+"/userByUsername?username="+username
      , {headers:new HttpHeaders({'Authorization':this.authenticationService.jwtToken})}
);

【讨论】：