angular - 服务类中的 RX/Js 可观察问题

Question

我面临角度和可观察的问题。我是新手:)

DadosPessoaisComponent.html:189 错误类型错误：无法读取未定义的属性“订阅”

我有一个具有两种方法的服务类：getEntity() 和 saveEntity()。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { Candidato } from '../model/Candidato';
import { Observable } from 'rxjs';
import { take, timeout, tap } from 'rxjs/operators';
import { LoginService } from '../login/login.service';


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

  constructor(private http: HttpClient,
    private loginService: LoginService) { 

      console.log('CandidatoService instanciado!')
    }

  private readonly API_CANDIDATO = environment.API + 'candidato';

  private duranteTrs = false;

  getCandidato(username: string) {

    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Accept', 'application/json');
    headers = headers.append('Access-Control-Allow-Origin', '*');

    headers = headers.append('Authorization', 'Bearer '  + this.loginService.getToken());


    console.log(headers);

    let params = new HttpParams();
    params = params.append('username', username)

    if (!this.duranteTrs) {
        this.duranteTrs = true;
        return this.http.get<Candidato>(this.API_CANDIDATO, { 
          headers,
          observe: 'response',
          params
        })
        .pipe(take(1))
          .pipe( timeout(3000) )
            .pipe(
                tap( response => {
                  return response;
                }, response => {
                  return response;
                }));
    }
  }

  salvarCandidato(candidato: Candidato) {

    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Accept', 'application/json');
    headers = headers.append('Authorization', 'Bearer ' + this.loginService.getToken());

    //console.log(headers);

    if (!this.duranteTrs) {
        this.duranteTrs = true;
        return this.http.post(this.API_CANDIDATO, candidato,  { 
          headers,
          observe: 'response'
        })
        .pipe(take(1))
          .pipe( timeout(3000) )
            .pipe(
                tap( response => {
                  this.duranteTrs = false;
                  return response;
                }, response => {
                  this.duranteTrs = false;
                  return response;
                }));
    }

  }

}

在我的组件中，我只是从服务器填充模型，并尝试从表单中保存数据。当我单击按钮时，它会调用 save() 方法并引发异常。

import { Component, OnInit } from '@angular/core';
import { Candidato } from 'src/app/model/Candidato';
import { Router } from '@angular/router';

import { BaseComponent } from 'src/app/util/BaseComponent';
import { DadosPessoais } from 'src/app/model/DadosPessoais';
import { LoginService } from 'src/app/login/login.service';
import { CandidatService } from '../candidat.service';
import { CandidatoService } from '../candidato.service';



@Component({
  selector: 'app-dados-pessoais',
  templateUrl: './dados-pessoais.component.html',
  styleUrls: ['./dados-pessoais.component.scss'],
})
//export class DadosPessoaisComponent extends BaseComponent implements OnInit {
  export class DadosPessoaisComponent implements OnInit {

  public candidato: Candidato;

  customPopoverOptions: any = {
    header: 'Escolha sua UF:',
  };

  constructor(private router: Router,
    private candidatoService: CandidatoService, 
    private vtnc: CandidatService, 
    private loginService: LoginService) {

   }

  ngOnInit() {

    const username = this.loginService.getUsuarioLogado();

    const dadosPessoais = new DadosPessoais();
    this.candidato = new Candidato(username, dadosPessoais);

    console.log(this.candidato);

    this.vtnc.getCandidato(username).subscribe(
      ((response) => { 
        console.log('response::'+ response);

        const dp: DadosPessoais = response.body.dadosPessoais;
        this.candidato = new Candidato(response.body.username, dp);

        console.log(this.candidato);
      }), (error) => {
        console.log('deu ruim')
      }
    );

  }

  saveIt(){
    console.log(this.candidato);

    this.vtnc.salvarCandidato(this.candidato).subscribe( (resp) => {
      alert('Usuário cadastrado com sucesso!');
      //form.reset();
      //btn.disabled = false;
  }, (out) => {
     console.log(out);
    //this.handleError(out);
    //btn.disabled = false;
  });


  }


  save(form: HTMLFormElement, btn: HTMLButtonElement){

  }



}

经过几个小时试图了解发生了什么，我创建了另一个服务类并调用了 service1.get() 和 service2.save() 并且它工作正常。我想知道根本原因。提前致谢。

标签： angularionic-frameworkrxjs