需要将角度4中的数据从数据服务传递到组件？

Question

创建项目组件;

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../../services/data.service'; 

import { Scenario } from './step1TS/scenario'; 
import { Complainces} from './step1TS/complainces'; 
import { Budget } from './step1TS/budget'; 
import { Size } from './step1TS/size'; 
import { Duration } from './step1TS/duration'; 
import { Role } from './step1TS/role'; 

@Component({ 
    selector: 'app-create-projects', 
    templateUrl: './create-projects.component.html', 
    styleUrls: ['./create-projects.component.css'] 
}) 
export class CreateProjectsComponent implements OnInit { 
    results : String[]; 
    selectedScenario : Scenario = new Scenario('Select A Scenario',''); 
    scenarios = [ 
    new Scenario('Select A Scenario',''), 
    new Scenario('Scenario1','sc1'), 
    new Scenario('Scenario2','sc2'), 
    new Scenario('Scenario3','sc3'), 
    new Scenario('Scenario4','sc4'), 
    new Scenario('Scenario5','sc5'), 
    new Scenario('Scenario6','sc6') 
    ] 
    selectedComplainces : Complainces = new Complainces('Type Of Complainces',''); 
    complainces = [ 
    new Complainces('Type Of Complainces',''), 
    new Complainces('Complainces1','c1'), 
    new Complainces('Complainces2','c2'), 
    new Complainces('Complainces3','c3'), 
    new Complainces('Complainces4','c4'), 
    new Complainces('Complainces5','c5'), 
    new Complainces('Complainces6','c6') 
    ] 
    selectedBudget : Budget = new Budget('Select A Budget',''); 
    budgets = [ 
    new Budget('Select A Budget',''), 
    new Budget('Budget1','b1'), 
    new Budget('Budget2','b2'), 
    new Budget('Budget3','b3'), 
    new Budget('Budget4','b4'), 
    new Budget('Budget5','b5'), 
    new Budget('Budget6','b6') 
    ] 
    selectedSize : Size = new Size('Size Of Project',''); 
    sizes = [ 
    new Size('Size Of Project',''), 
    new Size('Size1','s1'), 
    new Size('Size2','s2'), 
    new Size('Size3','s3'), 
    new Size('Size4','s4'), 
    new Size('Size5','s5'), 
    new Size('Size6','s6') 
    ] 
    selectedDuration : Duration = new Duration('Duration Of Project',''); 
    durations = [ 
    new Duration('Duration Of Project',''), 
    new Duration('Duration1','d1'), 
    new Duration('Duration2','d2'), 
    new Duration('Duration3','d3'), 
    new Duration('Duration4','d4'), 
    new Duration('Duration5','d5'), 
    new Duration('Duration6','d6') 
    ] 
    selectedRole : Role = new Role('Type Of Role',''); 
    roles = [ 
    new Role('Type Of Role',''), 
    new Role('Role1','r1'), 
    new Role('Role2','r2'), 
    new Role('Role3','r3'), 
    new Role('Role4','r4'), 
    new Role('Role5','r5'), 
    new Role('Role6','r6') 
    ] 


    constructor(private dataService: DataService) { 

    } 

    ngOnInit() { 

    } 
    public step1Div = true; 
    public ErrorAlert = ''; 
    Step1(){ 
     if(this.selectedScenario.value === ''){ 
      this.ErrorAlert = "Please Select Anyone Scenarios"; 
     }else if (this.selectedComplainces.value === '') { 

      this.ErrorAlert = "Please Select Anyone Complainces"; 

     }else if (this.selectedBudget.value === '') { 

      this.ErrorAlert = "Please Select Anyone Budget"; 
     }else if (this.selectedSize.value === '') { 

      this.ErrorAlert = "Please Select Anyone Size"; 

     }else if (this.selectedDuration.value === '') { 

      this.ErrorAlert = "Please Select Anyone Duration"; 

     }else if (this.selectedRole.value === '') { 

      this.ErrorAlert = "Please Select Anyone Role"; 

     }else{ 

      var step1Data = {"Scenario":this.selectedScenario.value,"Complainces":this.selectedComplainces.value, 
      "Size":this.selectedSize.value,"Role":this.selectedRole.value,"Budget":this.selectedBudget.value, 
      "Duration":this.selectedDuration.value,}; 



       this.dataService.getDocs().subscribe((data =>{ 
        console.log(data); 
       })) 
       console.log(step1Data); 

       this.step1Div = false; 
      } 
     } 
    } 

数据服务的.ts

import { CreateProjectsComponent } from '../component/create-projects/create-projects.component'; 
import { Injectable } from '@angular/core'; 
import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map' 

import { Scenario } from '../component/create-projects/step1TS/scenario'; 
import { Complainces} from '../component/create-projects/step1TS/complainces'; 
import { Budget } from '../component/create-projects/step1TS/budget'; 
import { Size } from '../component/create-projects/step1TS/size'; 
import { Duration } from '../component/create-projects/step1TS/duration'; 
import { Role } from '../component/create-projects/step1TS/role'; 

@Injectable() 
export class DataService { 
    headers: Headers; 
    options: RequestOptions; 

    selectedScenario : Scenario = new Scenario('Select A Scenario',''); 
    scenarios = [ 
    new Scenario('Select A Scenario',''), 
    new Scenario('Scenario1','sc1'), 
    new Scenario('Scenario2','sc2'), 
    new Scenario('Scenario3','sc3'), 
    new Scenario('Scenario4','sc4'), 
    new Scenario('Scenario5','sc5'), 
    new Scenario('Scenario6','sc6') 
    ] 
    selectedComplainces : Complainces = new Complainces('Type Of Complainces',''); 
    complainces = [ 
    new Complainces('Type Of Complainces',''), 
    new Complainces('Complainces1','c1'), 
    new Complainces('Complainces2','c2'), 
    new Complainces('Complainces3','c3'), 
    new Complainces('Complainces4','c4'), 
    new Complainces('Complainces5','c5'), 
    new Complainces('Complainces6','c6') 
    ] 
    selectedBudget : Budget = new Budget('Select A Budget',''); 
    budgets = [ 
    new Budget('Select A Budget',''), 
    new Budget('Budget1','b1'), 
    new Budget('Budget2','b2'), 
    new Budget('Budget3','b3'), 
    new Budget('Budget4','b4'), 
    new Budget('Budget5','b5'), 
    new Budget('Budget6','b6') 
    ] 
    selectedSize : Size = new Size('Size Of Project',''); 
    sizes = [ 
    new Size('Size Of Project',''), 
    new Size('Size1','s1'), 
    new Size('Size2','s2'), 
    new Size('Size3','s3'), 
    new Size('Size4','s4'), 
    new Size('Size5','s5'), 
    new Size('Size6','s6') 
    ] 
    selectedDuration : Duration = new Duration('Duration Of Project',''); 
    durations = [ 
    new Duration('Duration Of Project',''), 
    new Duration('Duration1','d1'), 
    new Duration('Duration2','d2'), 
    new Duration('Duration3','d3'), 
    new Duration('Duration4','d4'), 
    new Duration('Duration5','d5'), 
    new Duration('Duration6','d6') 
    ] 
    selectedRole : Role = new Role('Type Of Role',''); 
    roles = [ 
    new Role('Type Of Role',''), 
    new Role('Role1','r1'), 
    new Role('Role2','r2'), 
    new Role('Role3','r3'), 
    new Role('Role4','r4'), 
    new Role('Role5','r5'), 
    new Role('Role6','r6') 
    ] 

    constructor(public http:Http) { 
     console.log('Data Service Connceted'); 
     this.headers = new Headers({ 'Content-Type': 'application/json','Accept': 'q=0.8;application/json;q=0.9' }); 
     this.options = new RequestOptions({ headers: this.headers }); 
    } 
    getDocs(){ 
     var step1Data = {"Scenario":this.selectedScenario.value,"Complainces":this.selectedComplainces.value, 
     "Size":this.selectedSize.value,"Role":this.selectedRole.value,"Budget":this.selectedBudget.value, 
     "Duration":this.selectedDuration.value}; 
     console.log(step1Data); 

     let myHeaders = new Headers(); 
    myHeaders.set('Content-Type', 'application/json'); 
    let myParams = new URLSearchParams(); 
    myParams.set('Scenario' , this.selectedScenario.value); 
    myParams.set('Complaines' , this.selectedComplainces.value); 
    myParams.set('Duration' , this.selectedDuration.value); 
    myParams.set('Budget' , this.selectedBudget.value); 
    myParams.set('Role', this.selectedRole.value); 
    myParams.set('Size',this.selectedSize.value);  
    console.log(this.selectedSize.value); 
     let options = new RequestOptions({ headers: myHeaders, params: myParams }); 
     return this.http.get('http://192.168.0.5:7003/soa-infra/resources/default/SELECT_DOCs1_L!1.0/RestService/',options) 
     .map(res => res.json()); 
    } 

} 

我能够控制台登录组件中的数据，但是当我在数据业务也做了同样的显示空价值的地方，我没有明白是什么原因？ 任何人都可以帮忙吗？

我看了很多堆栈溢出，但它不符合我的任何结果？

我看了很多堆栈溢出，但它不符合我的任何结果？

Answer 1

服务

import { Injectable } from '@angular/core'; 
    import { Http,Headers } from '@angular/http'; 
    import { Observable } from 'rxjs/Observable'; 
    import 'rxjs/add/operator/map'; 
    import 'rxjs/Rx'; 

    @Injectable() 
    export class MyDataService { 
     constructor(private http: Http){} 

     async getHero(){ 
    const headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    headers.append('Access-Control-Allow-Origin', '*'); 

    return this.http.post('http://localhost:8081/getHeros', {headers: headers}).map(response => { 
     return response.json() || {success: false, message: "No response from server"}; 
    }).catch((error: Response | any) => { 
     return Observable.throw(error.json()); 
    }).toPromise(); 
    } 
    } 

组件

import { Component, ElementRef, Input, ViewChild } from '@angular/core'; 
import {NgForm} from '@angular/forms'; 
import { Hero } from './hero'; 
import { MyDataService } from '../my-data-service'; 
import { Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { AsyncLocalStorage } from 'angular-async-local-storage'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'hero-form', 
    providers: [MyDataService], 
    templateUrl: './hero-form.component.html' 
}) 
export class HeroFormComponent { 
    constructor(private http: Http, protected storage: AsyncLocalStorage, 
    private router: Router, private newService: MyDataService, private el: 
    ElementRef) {} 

    tester = ''; 
    async ngOnInit() { 
     this.isLoggedIn(); 
     const response = await this.newService.getHero(); 
     if(response.status == 'Success'){ 
     this.Error = ''; 
     this.Success = response.msg; 
     this.tableData = response.data; 
    }else { 
     this.Success = ''; 
     this.Error = response.msg; 
    } 
    } 
}