服务未正确注入且页面未显示任何结果 + angular 2

Question

您好，我正在创建一个 Angular 2 应用程序。似乎服务没有正确注入，因为我没有看到显示任何结果的页面。我已将 risk-list.component.html 设置为启动页面。有人可以告诉我问题出在哪里吗？
我也把代码上传到plunker

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { RiskListComponent } from './components/risks/risk-list.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, RiskListComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { DataTable, Column } from 'primeng/primeng';
import { Router } from  '@angular/router';
import {  Routes, RouterModule } from  '@angular/router';
import { WelcomeComponent } from  './components/home/welcome.component';
import { RiskListComponent } from './components/risks/risk-list.component';
import { RiskDetailsComponent } from './components/risks/risk-detail.component';
import { ModuleWithProviders } from '@angular/core';
import './rxjs-operators';


import { RiskService } from './components/risks/risk.service';

@Component({
    selector: 'my-app',
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
          <rm-risks> </rm-risks> 
    </div>
    <div>
      <router-outlet>  </router-outlet>
    </div>
     ` 
    //,
    //directives: [RiskListComponent, DataTable, Column],

})

export class AppComponent {
    pageTitle: string = 'Test UK Trader';
}

const appRoutes: Routes = [
    { path: '/welcome', component: WelcomeComponent },
    { path: '/risks', component: RiskListComponent },
    { path: '/riskdetails', component: RiskDetailsComponent }
];

main.ts

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { RiskService } from './components/risks/risk.service';
    import { HttpModule, JsonpModule } from  '@angular/http';
    import './rxjs-operators';
    import { enableProdMode } from '@angular/core';
    import { AppModule } from './app.module';


    const platform = platformBrowserDynamic();

    platform.bootstrapModule(AppModule, [HttpModule, JsonpModule, RiskService]).catch(err => console.error(err));

risk-list.component.ts

import { Component, OnInit } from '@angular/core';
import { IRisk } from './risk';
import { RiskService } from './risk.service';
import { DataTable, Column } from 'primeng/primeng';
import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';
import {Paginator} from 'primeng/primeng';


@Component({
    selector: 'rm-risks',
    //directives: [DataTable, Column, Header, Footer, Paginator],
    templateUrl: '/app/components/risks/risk-list.component.html',
    providers: [RiskService]
    })

export class RiskListComponent  {
    pageTitle: string = 'Risk List';
    errorMessage: string;
    risks: IRisk[];

    constructor(private _riskService: RiskService) {

        this.risks = this._riskService.getRisks();
    }


};

风险-list.component.html

<h3 class="first">{{pageTitle}}</h3>
<!--[rows]="5" [paginator]="true" [pageLinks]="2" [rowsPerPageOptions]="[5,10,20]"-->
<!--<p-paginator rows="10" totalRecords="100" pageLinkSize="3"></p-paginator>-->
<p-dataTable [value]="risks" [paginator]="true" rows="5" totalRecords="100" pageLinkSize="3" [rowsPerPageOptions]="[5,10,20]"  [sortMode]="multiple" sortField="inceptionDate" [sortOrder]="1" >
    <header>List of Risks</header>


        <!--<footer>Choose from the list.</footer>-->
        <p-column field="reference" header="Reference (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="insuredName" header="Insured Name (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="inceptionDate" header="Inception Date (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="riskType" header="Risk Type (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="status" header="Status (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="grossPremium" header="Gross Premium (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedTo" header="Allocated To (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedCompany" header="Allocated Company (contains)" [filter]="true" sortable="true"></p-column>

</p-dataTable>

风险服务

import { Injectable } from '@angular/core';
import { IRisk } from './risk';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';


@Injectable()
export class RiskService {
    //private _riskUrl = '/api/risks/risks.json';
    //constructor(private _http: Http) { }

    //getRisks(): Observable<IRisk[]> {
    //    return this._http.get(this._riskUrl)
    //        .map((response: Response) => <IRisk[]>response.json())
    //        .catch(this.handleError);
   // }

    //private handleError(error: Response) {
    //}
//}

    getRisks(): IRisk[] {
        return [

            {
                "riskId": 1,
                "reference": "HISC9308336",
                "insuredName": "SA 84161",
                "inceptionDate": "March 19, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 100,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 2,
                "reference": "HISC9308340",
                "insuredName": "Upper Loi",
                "inceptionDate": "April 25, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.22,
                "allocatedTo": "Andy Marples",
                "allocatedCompany": "Broker"
            }
        ];
    }
}

应用结构

Answer 1

此代码提取风险，但不对其执行任何操作

getRisks(): void {
    this._riskService.getRisks();
}

我想应该是

getRisks(): void {
    this.risks = this._riskService.getRisks();
}

我认为 ngOnInit() 应该是

ngOnInit(): void {                                                                                                                  
  //  this._riskService.getRisks();
  this.getRisks();
}

Answer 2

你必须教注射器如何制作Risk Service。您可以通过注册 RiskService 提供商来实现。您必须在 app.component.ts.

中执行此操作

在模板下的组件中添加 provider [RiskService]

Here 是来自 angualr 2 站点的解释。

Answer 3

您必须将您的服务包含到 NgModule 中

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { RiskListComponent } from './components/risks/risk-list.component';
import { RiskService } from './risk.service';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, RiskListComponent],
    bootstrap: [AppComponent],
    providers: [RiskService]
})
export class AppModule { }

在你的代码中对我来说更多的逻辑实现是将该服务用作单例。因此您不需要将其作为提供者包含在组件声明中。仅在构造函数中。

服务未正确注入且页面未显示任何结果 + angular 2

Service not getting injected correctly and page shows no results + angular 2

javascript

angularjs

angular

angular2-services