Question

我正在构建一个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 { }

做错了什么？

Answer 1

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

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

 constructor(private releasesService: ReleasesService) { 
 }

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

Angular2应用程序没有看到服务

1 个答案: