Question

我是angular 2的新手，我正在尝试从服务中获取数据。问题是数据未显示且服务组件未显示在chrome developer tools下的网络选项卡中

这是我的服务

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

app模块以防万一

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

通过远程团队查看器解决，以下是您犯的错误

HelperComponent不应该是路由期间的组件，如app.module
您正在使用DCS组件中的服务，因此您需要启动。
Null错误是因为selector为null，因此来自zone.js的错误
数据：任何[];是decalared但没有定义。所以我在构造函数中。

订阅不工作angular2

1 个答案: