Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   JSON в рендер Angular2 (https://javascript.ru/forum/angular/66675-json-v-render-angular2.html)

Alexander Belov 01.01.2017 01:53

JSON в рендер Angular2
 
Привет!

Есть задача отрендерить json во view.
Расклад такой:
releases.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Jsonp } from '@angular/http';

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

	}
	fetchData(){
		return this.http.get('app/releases.json').map(
			(res) => res.json()
		);
	}
}


releases-list.component.ts

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

@Component({
	moduleId: module.id,
	selector: 'releases-list',
	templateUrl: 'app/releases/releases-list.component.html',
	providers: [ReleasesService]

})

export class ReleasesListComponent implements OnInit { 
	releases = [];

	constructor (private releasesService: ReleasesService) { }

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


releases-lits.component.html
<div class="releases-list-component">

	<div class="mdl-tabs__tab-bar releasesTabsBar row">
		<a routerLink="albums" class="mdl-tabs__tab">Albums</a>
		<a routerLink="tributes" class="mdl-tabs__tab">Tributes</a>
		<a routerLink="splits" class="mdl-tabs__tab">Splits</a>
	</div>

	<div class="one" *ngFor="let release of releases">
		{{releases.name}}
	</div>

</div>


releases.json
[
{
"name" : "Release 1",
"songs" : [
"Song 1",
"Song 2",
"Song 3",
"Song 4",
"Song 5"
],
"year" : "2012"
},

{
"name" : "Release 2",
"songs" : [
"Song 1",
"Song 2",
"Song 3",
"Song 4",
"Song 5"
],
"year" : "2014"
},

{
"name" : "Release 3",
"songs" : [
"Song 1",
"Song 2",
"Song 3",
"Song 4",
"Song 5"
],
"year" : "2016"
}

]

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 { ReleasesListComponent } from './releases/releases-list.component';
import { ContactComponent } from './contact/contact.component';
import { ReleasesService } from './releases/releases.service';
import { routing } from './app.routes';


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

  declarations: [ 
  		AppComponent,
  		HomeComponent,
  		ReleasesListComponent,
                ReleasesService,
  		ContactComponent
  ],

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


Ни в консоли, ни в sublime text 3 не показывает никаких ошибок. Всё ок, но во view не рендерится.

destus 01.01.2017 09:33

Alexander Belov,
HttpModule в главном модуле заимпортил?

Alexander Belov 01.01.2017 10:50

destus,
Да, импортирован. Добавил в вопрос код из главного модуля - app.module.ts

destus 01.01.2017 14:58

Ну смотри, у тебя в let присваивается release, а выводишь ты как realeses.name. Сделай
release.name

Alexander Belov 02.01.2017 22:12

destus,
Это осталось из той версии, где я уже начал перебирать всевозможные варианты, чтобы отображалось.

Пока не удалось найти причину.

destus 03.01.2017 07:31

Alexander Belov,
Не надо сервис обьявлять в declarations в главном модуле. Он обьявляется в providers. Если так и не получается, сделай тестовый пример. Чтобы запустить его можно было.

vitsy 04.01.2017 23:24

еще {{release.name}} вместо {{releases.name}}


Часовой пояс GMT +3, время: 02:13.