Question

当我尝试subrcibe到post请求时，它总是返回TypeError：result is null

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

这是堆栈跟踪：

“LoginComponent.prototype.login /＆LT; @的WebPack内部：///../../../../../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 \ NINN erSubscriber.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内部：/ //../../../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内部：///../ ../../../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);
             });
 }

TypeError：订阅帖子请求时结果为空

1 个答案: