Angular2應用程序沒有看到服務

我正在構建一個Angular2應用程序並嘗試從本地json文件獲取數據。問題是我創建的服務被應用程序忽略。沒有錯誤，警告或任何在控制檯或終端。Angular2應用程序沒有看到服務

的index.html

<!DOCTYPE html> 
<html> 
<head> 
<base href="/"> 
<title>My app</title> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="app/assets/flex.css"> 
<link rel="stylesheet" href="app/assets/styles.css"> 

<!-- Polyfill(s) for older browsers --> 
<script src="node_modules/core-js/client/shim.min.js"></script> 

<script src="node_modules/zone.js/dist/zone.js"></script> 
<script src="node_modules/reflect-metadata/Reflect.js"></script> 
<script src="node_modules/systemjs/dist/system.src.js"></script> 

<script src="systemjs.config.js"></script> 
<script> 
    System.import('app').catch(function(err){ console.error(err); }); 
</script> 
</head> 

<body> 
<my-app>OLOLOading...</my-app> 
</body> 
</html>

releases.component.ts

import { Component, OnInit } from '@angular/core'; 
import { ReleasesService } from './releases/releases.service'; 

@Component({ 
selector: 'releases', 
templateUrl: 'app/releases/releases.component.html', 
providers: [ReleasesService] 
}) 

export class ReleasesComponent implements OnInit { 

constructor(private releasesService: ReleasesService) { 
    this.releases = releasesService.getReleases(); 
} 

ngOnInit() { 
    this.releasesService.getReleases().subscribe(
     releases => { 
      this.releases = releases; 
     } 
    ); 
    } 
}

releases.component.html

<div class="releases-component"> 
    <div *ngFor="let release of releases | async"> 
    <h3>Name: {{releases.name}}</h3> 
    <h4>Name: {{releases.instrument}}</h4> 
    </div> 
</div>

releases.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response, Jsonp, Headers, Response, RequestsOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class ReleasesService { 

constructor (private http: Http){ } 

    getReleases =(): Observable<Response> => { 
    console.log(this.releases); 
    return this.http.get('app/releases/releases.json') 
    .map(res => res.json()); 
    } 

}

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule, JsonpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { ReleasesComponent } from './releases/releases.component'; 
import { DistroComponent } from './distro/distro.component'; 
import { ContactsComponent } from './contacts/contacts.component'; 
import { routing } from './app.routes'; 


@NgModule({ 
    imports:[ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    JsonpModule, 
    routing 
], 

declarations: [ 
    AppComponent, 
    HomeComponent, 
    ReleasesComponent, 
    DistroComponent, 
    ContactsComponent 
], 

bootstrap: [ AppComponent ] 
}) 
export class AppModule { }

什麼已經做了？

來源

2017-01-05 Alexandr Belov

您是否在控制檯內登錄了訂閱？它記錄什麼？ – echonax

你的意思是在地圖方法裏面嗎？ CONSOLE.LOG忽略每當我在服務 –

沒有我的意思訂閱..'this.releasesService.getReleases（）認購試了一下（發佈=> { this.releases =排放; } ）;' – echonax

如果使用異步管道，則不需要使用顯式subscribe（），因爲異步會自動訂閱observable。試試這個：

export class ReleasesComponent implements OnInit { 
releases: Observable<Array<string>>; 

constructor(private releasesService: ReleasesService) { 
} 

ngOnInit() { 
    this.releases = this.releasesService.getReleases(); 
} 
}

來源

2017-01-05 17:46:15

Angular2應用程序沒有看到服務

回答

相關問題