javascript - 类型错误 : result is null when subscribing to a post request

Question

当我尝试订阅 post 请求时，它总是返回 TypeError: result is null

我正在使用 Angular CLI 与 Spring boot 应用程序连接，并带有一个简单的登录页面。我想将响应的 header 保存在本地存储中的位置

这是堆栈跟踪:

"LoginComponent.prototype.login/<@webpack-internal:///../../../../../src/app/components/login/login.component.ts:32:13\nSafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:245:13\nSafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:192:17\nSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:133:9\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nMapSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/operators/map.js:88:9\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nFilterSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/operators/filter.js:92:13\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nMergeMapSubscriber.prototype.notifyNext@webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:156:13\nInnerSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/InnerSubscriber.js:27:9\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nonLoad@webpack-internal:///../../../common/esm5/http.js:2310:21\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:421:17\nonInvokeTask@webpack-internal:///../../../core/esm5/core.js:4939:24\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17\nZone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28\nZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:496:24\ninvokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1517:9\nglobalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1543:17\n"

这是我的login.service.ts:

const httpOptions = {   headers: new HttpHeaders({'Content-type': 'application/json'}) };

@Injectable() export class LoginService {

  private loginUrl = 'https://music-makers.herokuapp.com/login';

  constructor(private http: HttpClient) { }

  public login(user: User): Observable<any> {
    return this.http.post(this.loginUrl, user, httpOptions);   }

还有我的login.components.ts:

export class LoginComponent implements OnInit {

  model: any = {};

  constructor(private loginService: LoginService, public router: Router) {
  }

  ngOnInit() {
  }

  login() {
    const user = <User>({
      email: this.model.email,
      password: this.model.password,
    });

    console.log('email: ' + user.email + '\npass: ' + user.password);

    this.loginService.login(user)
      .subscribe(
        result => {
          // Handle result
          localStorage.setItem('Authorization', result.headers.get('Authorization'));
          console.log(result);
        },
        error => {
          // Handle error
          console.log('Error');
        },
        () => {
          console.log('complete');
          // No errors, route to new page
        }
      );
  }
}

Answer 1

您的服务应该使用map()作为可观察集合返回

public login(user: User): Observable<any> {
   return this.http.post(this.loginUrl, user, httpOptions)
             .map(responce => <any>responce)
             .catch(error => {
                return Observable.throw(error);
             });
 }