Angular2 App 看不到服务答案

【问题标题】：Angular2 App doesn't see ServiceAngular2 App 看不到服务
【发布时间】：2017-01-05 17:13:16
【问题描述】：

我正在构建一个 Angular2 应用程序并尝试从本地 json 文件中获取数据。问题是我创建的服务被应用程序忽略了。控制台或终端中没有错误、警告或任何内容。

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 { }

做错了什么？

【问题讨论】：

您是否在订阅中进行控制台登录？它记录什么吗？
你的意思是在map方法里面吗？每当我在服务中尝试时，Console.log 都会被忽略
不，我的意思是订阅.. this.releasesService.getReleases().subscribe( releases => { this.releases = releases; } );
为什么要在构造函数中使用this.releases = releasesService.getReleases();，因为您订阅的是ngOnInit。这可能是一个原因？
看来我的releases.service.ts 没有在保存时转换成releases.service.js

标签： json http angular observable

【解决方案1】：

如果您使用异步管道，则不需要使用显式 subscribe()，因为异步会自动订阅 observable。试试这个：

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

 constructor(private releasesService: ReleasesService) { 
 }

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

【讨论】：