在 Angular 8 中将 Observable 订阅到组件时遇到问题

Question

我正在尝试通过 httpclient 获取数据，为此我使用了 Observable ，并尝试将该 Observable 订阅到组件这样做我收到错误

this.res.job.map is not a function at SignupComponent.jobTitle

SignupComponent.ts:

    import { Component, OnInit } from '@angular/core';
    import { SignupService } from '../service/signup/signup.service';

    @Component({
      selector: 'app-signup',
      templateUrl: './signup.component.html',
      styleUrls: ['./signup.component.scss']
    })
    export class SignupComponent  {


     constructor(private fb: FormBuilder ,public res : SignupService ) { 
   this.jobtitle() }


    jobtitle(){
        this.res.jobTitle.map((res : Response) => res.json()).subscribe(result => {
          console.log(result);
        })
      }

    }

服务

     import { Injectable } from '@angular/core';
    import { observable, Observable } from 'rxjs';
    import { HttpClient } from '@angular/common/http';


    @Injectable({
      providedIn: 'root'
    })
    export class SignupService {

     constructor(public http: HttpClient) {}

  jobTitle() : Observable<any>{
     return this.http.get(this.jobTitle);
   }
    }

Answer 1

我们不需要使用 HttpClient 映射它

你还忘了在 jobTitle() 函数中添加括号 () 像这样尝试：

this.res.jobTitle().subscribe(result => {
  console.log(result);
})

Answer 2

为了使用 RXJS 运算符（如 map、filter 等...），您需要为每个运算符使用 pipe() 方法，并将您想要使用的所有运算符放在 pipe() 方法中.因此，运算符不是 RXJS 5.5 中引入的方法。

例如：

of(1,2,3).pipe(
  map(x => x + 1),
  filter(x => x > 2)
);

旧方法看起来像这样（现在不起作用）：

of(1,2,3).map(x => x + 1).filter(x => x > 2);

Answer 3

您好，错误试图告诉 oyu，res.jobTitle 不存在。尽管有 none，但您将其用作服务 this.jobTitle 的字段。因此 undefined.map 不是函数。除此之外 map() 只能在 pipe()

中调用

此外，我不确定您为什么使用 jobTitle 作为输入 http.get()。由于 get() 需要一个 url 作为输入，并且您的其余代码已准备就绪，就好像 jobTitle 应该是您的结果值一样。

在 Angular 8 中将 Observable 订阅到组件时遇到问题

Facing problem in Subscribing Observable to component in Angular 8

rxjs

angular

angular-observable

angular-httpclient

angular8