Подписаться не работает angular2

Question

Я новичок в угловом 2, и я пытаюсь получить данные из службы. Проблема заключается в том, что данные не отображаются, а компонент службы не отображается на вкладке сети под инструментами для обработки хрома.

Это моя служба

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 была вызвана тем, что селектор был пустым и поэтому ошибка из зоны.js
4. данные: any []; декалируется, но не определяется. так что я это в конструкторе.