对springboot应用程序的Http调用未命中angular应用程序

Question

我已经创建了一个类似这样的服务类，

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class PacsService {

  private url: string = "http://localhost:8888/";

  constructor(private http: Http) { }

  getPacs(){
    return this.http.get(this.url+"pacs/getAll")
      .map(res => res.json());
  }

  getPac(id){
    return this.http.get(this.getPacUrl(id))
      .map(res => res.json());
  }

  addPac(pac){
    return this.http.post(this.url+"pacs/create", pac)
      .map(res => res.json());
  }

  updatePac(pac){
    return this.http.put(this.url+"pacs/update", pac)
      .map(res => res.json());
  }

  deletePac(id){      
    return this.http.delete(this.url+"pacs/delete/"+id)
      .map(res => res.json());
  }
  getDccbBranches()
  {
    return this.http.get(this.url+"dccbBranch/getAll")
      .map(res => res.json());
  }

  private getPacUrl(id){
    return this.url + "pacs/getById/" + id;
  }
}

没有任何方法命中springboot应用程序。但是springboot应用程序运行得很好，.I已经通过浏览器进行了检查，但通过angular应用程序却无法进行检查。

我所做的是，

我在调试模式下启动了springboot应用程序，并在调试模式下运行了angular应用程序。但是它并没有达到springboot应用程序的调试点。

有人能帮帮忙吗？

注意:在visual studio代码中使用angular 5。

组件看起来像这样，

export class AddressComponent implements OnInit {

  addressForm: FormGroup;
  address: Address;
  contactInfo: ContactInfo;
  pacs: Pacs;
  transportization: Transportization;

  constructor(private fb:FormBuilder,
    private router: Router,
    private route: ActivatedRoute,
    private pacsService: PacsService,
    private contactInfoService: ContactInfoService,
    private addressService: AddressService,
    private transportizationService: TransportizationService) {

      this.pacs=new Pacs();
      this.contactInfo = new ContactInfo();
      this.address = new Address();
      this.transportization = new Transportization();
}

save() {

    console.log('in Save button of Address Component...');
    var result;



    if (this.pacs.id){
      console.log('Inside update pac of Address component');
      result = this.pacsService.updatePac(this.pacs);
    } else {
      console.log('Inside add pac of Address component');
      //result = this.pacsService.addPac(this.pacs);
      this.pacsService.getPacs();
    }
    if(result != null) {
      console.log('Data Inserted in Pacs table', );
    }
    else {
      console.log("Data not Inserted in Pacs table");
    }

address.module.ts包含，

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule }  from '@angular/router';
import { HttpModule }  from '@angular/http';

import { AddressComponent } from './address.component';
import { AddressService } from './shared/addressService/address.service';
import { ContactInfoService } from './shared/contactService/contactInfo.service';
import { PacsService } from './shared/pacsService/pacs.service';
import { TransportizationService } from './shared/transportizationService/transportization.service';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    HttpModule
  ],
  declarations: [
    AddressComponent
  ],
  exports: [
    AddressComponent
  ],
  providers: [
    AddressService,
    ContactInfoService,
    PacsService,
    TransportizationService
  ]
})
export class addressModule { }

Answer 1

.map()不会触发http请求，它是一个回调，在返回初始调用之前将被调用。

尝试执行结果(结果{result=>{this.localDataVariable=.subscribe})或.toPromise().then(result=>{this.localDataVariable =result=>})

使用您的代码，尝试以下操作：

if (this.pacs.id){
    console.log('Inside update pac of Address component');
    this.pacsService.updatePac(this.pacs)
        .subscribe(
            res => result = res,
            err => console.log(err),
            () => console.log("Completed Call"),
        );
} else {
      console.log('Inside add pac of Address component');
      //result = this.pacsService.addPac(this.pacs);
      this.pacsService.getPacs()
        .subscribe(
            res => result = res,
            err => console.log(err),
            () => console.log("Completed Call"),
        );
}

Answer 2

向服务请求添加subscribe成功。

就像这样，this.pacsService.addPac(this.pacs).subscribe(data => this.pacs = data)；

Answer 3

Http rxjs请求返回一个可观察的对象，在您的服务中管理此对象的正确方法是：

get(): Observable<T> {
    return this.http.get<T>(url)
}

其中T是您的请求返回的对象。

在您的组件中，以这种方式调用服务：

this.service.get().subscribe(value => this.variable = value)

其中服务是注入到构造函数中的类：

constructor(private service: Service) {}

欲了解更多信息，请访问https://angular.io/guide/http