Question

我正在学习Angular 6，我无法将数据从服务传递到组件。

这是我的代码，我试图从tuto Tour of Heroes中复制它，但它不起作用

LoginComponent：

this.authenticationService.login(this.f.email.value, this.f.password.value)
      .pipe(first())
      .subscribe(
        data => {
          console.log(data);
          this.router.navigate([this.returnUrl]);
        },
        error => {
          console.log(error.error);
          this.error = error;
          this.loading = false;
        });
  }

AuthenticationService：

login(email: string, password: string): Observable<any> {
    return this.http.post<any>('https://api.kz-api.test/auth/login', {email: email, password: password}, httpOptions)
      .pipe(
        map((res: any) => {
          if (res && res.token) {
            this.setToken(TOKEN);
          }
        }),
        catchError(this.handleError('login', []))
      );
  }

它应返回一个可观察但在组件中，console.log(data);给出[]

我做错了什么？

Answer 1

我认为您的问题是您使用的是map运算符，而不是使用tap运算符。现在，您正在映射响应而不返回任何内容，因此数据将发送到[]。

Answer 2

您没有从服务返回任何响应数据。试试这个：

login(email: string, password: string): Observable<any> {
        return this.http.post<any>('https://api.kz-api.test/auth/login', {email: email, password: password}, httpOptions)
          .pipe(
            map((res: any) => {
              if (res && res.token) {
                this.setToken(TOKEN);
              }
              return {
                  res: res.json()
             };
            }),
            catchError(this.handleError('login', []))
          );
      }

我应该如何在Angular6中的组件中通过HTTP传递我在服务中获得的数据

2 个答案: