web-dev-qa-db-ja.com

（TypeError：HttpHeaders.applyUpdateでnullのプロパティ 'length'を読み取れません）Angular 5、Http Client

サービスで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では機能しません。 UserServiceはグローバルサービスであり、Loginは別のモジュールにあります。

App.moduleとLogin ModuleにHTTPClientModuleも追加しました。

angularhttpclientangular5
10
Alamgir Qazi

このようにしてみてください：

service.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())
}

component.ts

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

ヘッダーにNull値を設定しないでください

私はこの種の問題に直面しました。問題はヘッダーにあり、私はnull値をプッシュしていました。

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

これを修正するには、ヘッダーに設定する前にトークンをチェックします。

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