Столкнувшаяся проблема при подписке наблюдаемого на компонент в Angular 8

Question

Я пытаюсь получить данные через httpclient, для этого я использовал Observable и попытался подписать это Observable на компонент. При этом я получаю сообщение об ошибке

this.res.job.map isне работает в RegistrationComponent.jobTitle

RegistrationComponent.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

Привет, что ошибка пытается сказать ою, что res.jobTitle не существует.Вы используете это как поле вашей службы this.jobTitle, хотя ее нет.Поэтому undefined.map не является функцией.В дополнение к этому map() можно вызывать только внутри pipe()

Также я не уверен, почему вы используете jobTitle в качестве ввода для вас http.get().Поскольку get() хочет, чтобы в качестве входных данных использовался URL-адрес, а остальная часть кода oyur была готова, как будто в качестве полученного значения должно использоваться jobTitle.

Answer 3

Для использования операторов 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);