服務沒有得到正確注入和頁面顯示沒有結果+角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> 

riskservice

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

你必須包括你的服務到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 { } 

在你的代碼對我來說，更多的邏輯實現，是使用該服務爲單身。所以你不需要將它作爲提供者包含在Component聲明中。只在構造函數中。

Answer 2

此代碼獲取的風險，但不會做任何與它

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

我認爲它應該是

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

，我以爲ngOnInit()應該

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

Answer 3

你要教噴油器如何做一個Risk Service。您通過註冊RiskService供應商來完成此操作。您必須在app.component.ts中執行此操作。

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

Here從angualr 2個網站的explanatioin。