Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.01.2017, 01:53
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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 не рендерится.

Последний раз редактировалось Alexander Belov, 01.01.2017 в 10:48.
Ответить с цитированием
  #2 (permalink)  
Старый 01.01.2017, 09:33
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Alexander Belov,
HttpModule в главном модуле заимпортил?
Ответить с цитированием
  #3 (permalink)  
Старый 01.01.2017, 10:50
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

destus,
Да, импортирован. Добавил в вопрос код из главного модуля - app.module.ts
Ответить с цитированием
  #4 (permalink)  
Старый 01.01.2017, 14:58
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Ну смотри, у тебя в let присваивается release, а выводишь ты как realeses.name. Сделай
release.name
Ответить с цитированием
  #5 (permalink)  
Старый 02.01.2017, 22:12
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

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

Пока не удалось найти причину.
Ответить с цитированием
  #6 (permalink)  
Старый 03.01.2017, 07:31
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Alexander Belov,
Не надо сервис обьявлять в declarations в главном модуле. Он обьявляется в providers. Если так и не получается, сделай тестовый пример. Чтобы запустить его можно было.
Ответить с цитированием
  #7 (permalink)  
Старый 04.01.2017, 23:24
Новичок на форуме
Отправить личное сообщение для vitsy Посмотреть профиль Найти все сообщения от vitsy
 
Регистрация: 04.01.2017
Сообщений: 4

еще {{release.name}} вместо {{releases.name}}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сериализация форм в json Dtri jQuery 17 07.02.2017 11:42
Не могу распарсить JSON. gorenie jQuery 3 29.11.2013 22:26
Проблемы с jqGrid и JSON massacra_panda Библиотеки/Тулкиты/Фреймворки 1 08.10.2012 16:44
JSON или JSONP для запросов на другой сервер? Метод GET, для длинных сообщений? Kotakota jQuery 5 23.08.2011 23:12
jQuery. Обработка ошибок и JSON. mma_mma jQuery 3 19.07.2010 12:10