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,
HttpModule в главном модуле заимпортил? |
destus,
Да, импортирован. Добавил в вопрос код из главного модуля - app.module.ts |
Ну смотри, у тебя в let присваивается release, а выводишь ты как realeses.name. Сделай
release.name |
destus,
Это осталось из той версии, где я уже начал перебирать всевозможные варианты, чтобы отображалось. Пока не удалось найти причину. |
Alexander Belov,
Не надо сервис обьявлять в declarations в главном модуле. Он обьявляется в providers. Если так и не получается, сделай тестовый пример. Чтобы запустить его можно было. |
еще {{release.name}} вместо {{releases.name}}
|
Часовой пояс GMT +3, время: 04:42. |