订阅不工作angular2

Question

我是新来的角2，我试图从的服务。问题是不显示的数据中获取数据和服务组件不会在网络选项卡下的Chrome开发者工具显示

这是我服务

import { Injectable } from '@angular/core'; 
import { Http,Response } from '@angular/http'; 
import { Observable } from 'rxjs'; 
import { DCSComponent } from '../dcs/dcs.component'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class ServicesService { 

    constructor(private http:Http) { } 

    extractdata(res:Response) { 
    return <DCSComponent[]>res.json(); 
    } 

    getdata():Observable<DCSComponent[]> { 
     return this.http.get('http://localhost:53158/api/Test').map(this.extractdata); 
    } 
} 

这是组件订阅服务，

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

@Component({ 
    selector: 'app-dcs', 
    templateUrl: './dcs.component.html', 
    styleUrls: ['./dcs.component.css'], 
    providers: [ServicesService] 
}) 

export class DCSComponent implements OnInit { 
    data: any[]; 

    constructor(private servicesService : ServicesService){ } 

    ngOnInit(){ 
    this.servicesService.getdata().subscribe(data=>this.data=data); 
    } 
} 

应用模块以防万一

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AlertModule} from 'ng2-bootstrap'; 
import { AppComponent } from './app.component'; 
import { DCSComponent } from './dcs/dcs.component'; 
import { HCMComponent } from './hcm/hcm.component'; 
import { FinanceComponent } from './finance/finance.component'; 
import { EmployeeComponent } from './employee/employee.component'; 
import { HelperComponent } from './helper/helper.component'; 
import { TravelRequestComponent } from './dcs/travel-request/travel-request.component'; 
import {RouterModule} from '@angular/router'; 

import { ServicesService } from './services/services.service'; 
import { DataComponent } from './data/data.component' 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    DCSComponent, 
    HCMComponent, 
    FinanceComponent, 
    EmployeeComponent, 
    HelperComponent, 
    HelperComponent, 
    TravelRequestComponent, 
    TravelRequestComponent, 
    DataComponent,  
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
     [AlertModule.forRoot()], 
    RouterModule.forRoot([ 
     {path:'CreateRequest',component:TravelRequestComponent}, 
     {path:'welcome',component:HelperComponent}, 
     {path:'',redirectTo:'welcome',pathMatch:'full'} 
    ]) 
    ], 
    providers: [ServicesService], 
    bootstrap: [AppComponent], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 
export class AppModule { } 

网络标签：

Answer 1

我建议其高度没用的，有ExtractData由（）方法时，你要使用它，如下所示，只在一行中工作。

getdata():Observable<DCSComponent[]> 
{ 
    return this.http.get('http://localhost:53158/api/Test') 
        .map((res: Response) => <DCSComponent[]>res.json()); 
} 

不过来解决你的问题，你应该使用这种方式

getdata():Observable<DCSComponent[]> 
    { 
     return this.http.get('http://localhost:53158/api/Test') 
         .map((response: Response) => this.extractdata(response)); 
    } 

通过远程的TeamViewer解决的，以下是你做

1. HelperComponent不应该是该组件的错误在路由期间，如app.module
2. 您正在DCS组件中提供服务，因此您需要启动。
3. Null错误是因为选择器为空，因此来自zone.js的错误
4. data：any [];是decalared，但没有定义。所以我在构造函数中。