订阅不工作 angular2

Question

我是 angular 2 的新手，我正在尝试从 service.The 获取数据问题是数据未显示，服务组件未显示在 [= 下的网络选项卡中36=] 开发者工具

这是我的服务

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));
    }

通过remote teamviewer解决，以下是你犯的错误

HelperComponent 不应像 app.module
您正在使用 DCS 组件中的服务，因此需要启动。
Null 错误是因为选择器为 null，所以来自 zone.js
数据：任意[]；已声明但未定义。所以我在构造函数中。

订阅不工作 angular2

Subscribe not working angular2

angular

angular2-services