Задать вопрос
terehin_k
@terehin_k
frontend developer
angular.js

Angular 4 Почему не отображаются данные в шаблоне компонента?

Привет. Встретился с проблемой отображения данных в шаблоне. Интересно что в консоле данные выводятся.. Сама ошибка ниже.

Шаблон и контроллер компонента:
<div class="counter">
	<span class="counter__title">Active Users</span>
	<h3 class="counter__number">{{counters.sessionsCount}}</h3>
</div>


import { Component, OnInit } from '@angular/core';

import { AnalyticsService } from '../../../services/analytics.service';

@Component({
  selector: 'counters',
  templateUrl: './stats.component.html',
  styleUrls: ['./stats.component.sass']
})
export class StatsComponent implements OnInit {

	counters;

	constructor (private analyticsService:AnalyticsService) {}

  ngOnInit() {
    this.analyticsService.getStatsData({type: 'day'}).subscribe( data => {
      this.counters = data;
    },
    err => {
      console.log(err);
      return false;
    }); 
  }

}


Сервис получения данных:
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';

import 'rxjs/add/operator/map';

@Injectable()
export class AnalyticsService {

	isDev:boolean;

  constructor(private http:Http) { 
  	this.isDev = true;
  }

  getStatsData(rangeType) {
    let headers = new Headers();
    headers.append('Content-Type','application/json');

    let ep = this.prepEndpoint('telemetry/getStatsData');
    return this.http.post(ep, rangeType, {headers: headers})
      .map(res => res.json());
  }

  prepEndpoint(ep) {
    if (this.isDev) return `http://localhost:8080/${ep}`
    	else return ep;
  }

}


Такой json мне отдает сервер: 
{
    "sessionsCount": 2306,
    "activeUsers": 1023,
    "newUsers": 121
}


Ошибка:
error_handler.js:59 ORIGINAL STACKTRACE:
webpackJsonp.../../../core/src/error_handler.js.ErrorHandler.handleError @ error_handler.js:59
next @ application_ref.js:348
schedulerFn @ async.js:93
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/src/facade/async.js.EventEmitter.emit @ async.js:79
webpackJsonp.../../../core/src/zone/ng_zone.js.NgZone.triggerError @ ng_zone.js:333
onHandleError @ ng_zone.js:294
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:338
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded @ zone.js:142
_loop_1 @ zone.js:557
drainMicroTaskQueue @ zone.js:566
ZoneTask.invoke @ zone.js:424
error_handler.js:60 Error: Uncaught (in promise): Error: Error in ./StatsComponent class StatsComponent - inline template:4:31 caused by: Cannot read property 'sessionsCount' of undefined
Error: Error in ./StatsComponent class StatsComponent - inline template:4:31 caused by: Cannot read property 'sessionsCount' of undefined
    at ViewWrappedError.ZoneAwareError (zone.js:992)
    at ViewWrappedError.BaseError [as constructor] (errors.js:22)
    at ViewWrappedError.WrappedError [as constructor] (errors.js:87)
    at new ViewWrappedError (errors.js:77)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView._rethrowWithContext (view.js:650)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView.detectChanges (view.js:623)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.internalDetectChanges (view.js:410)
    at CompiledTemplate.proxyViewClass.View_AnalyticsComponent0.detectChangesInternal (/AppModule/AnalyticsComponent/component.ngfactory.js:62)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.detectChanges (view.js:425)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView.detectChanges (view.js:620)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.internalDetectChanges (view.js:410)
    at CompiledTemplate.proxyViewClass.View_AnalyticsComponent_Host0.detectChangesInternal (/AppModule/AnalyticsComponent/host.ngfactory.js:29)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.detectChanges (view.js:425)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView.detectChanges (view.js:620)
    at ViewRef_.webpackJsonp.../../../core/src/linker/view_ref.js.ViewRef_.detectChanges (view_ref.js:170)
    at resolvePromise (zone.js:665) [angular]
    at resolvePromise (zone.js:636) [angular]
    at :4200/polyfills.bundle.js:6381:17 [angular]
    at Object.onInvokeTask (ng_zone.js:264) [angular]
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:366) [angular]
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:166) [<root> => angular]
    at drainMicroTaskQueue (zone.js:546) [<root>]
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:424) [<root>]
webpackJsonp.../../../core/src/error_handler.js.ErrorHandler.handleError @ error_handler.js:60
next @ application_ref.js:348
schedulerFn @ async.js:93
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238
webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55
webpackJsonp.../../../core/src/facade/async.js.EventEmitter.emit @ async.js:79
webpackJsonp.../../../core/src/zone/ng_zone.js.NgZone.triggerError @ ng_zone.js:333
onHandleError @ ng_zone.js:294
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:338
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded @ zone.js:142
_loop_1 @ zone.js:557
drainMicroTaskQueue @ zone.js:566
ZoneTask.invoke @ zone.js:424
zone.js:522 Unhandled Promise rejection: Error in ./StatsComponent class StatsComponent - inline template:4:31 caused by: Cannot read property 'sessionsCount' of undefined ; Zone: angular ; Task: Promise.then ; Value: ViewWrappedError {__zone_symbol__error: Error: Error in ./StatsComponent class StatsComponent - inline template:4:31 caused by: Cannot read ……} Error: Error in ./StatsComponent class StatsComponent - inline template:4:31 caused by: Cannot read property 'sessionsCount' of undefined
    at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6660:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73281:16)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:73346:16)
    at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:74650:16)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:76044:23)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:76017:18)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:75804:18)
    at CompiledTemplate.proxyViewClass.View_AnalyticsComponent0.detectChangesInternal (/AppModule/AnalyticsComponent/component.ngfactory.js:62:19)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:75819:14)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:76014:44)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:75804:18)
    at CompiledTemplate.proxyViewClass.View_AnalyticsComponent_Host0.detectChangesInternal (/AppModule/AnalyticsComponent/host.ngfactory.js:29:19)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:75819:14)
    at CompiledTemplate.proxyViewClass.webpackJsonp.../../../core/src/linker/view.js.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:76014:44)
    at ViewRef_.webpackJsonp.../../../core/src/linker/view_ref.js.ViewRef_.detectChanges (http://localhost:4200/vendor.bundle.js:76807:20)
consoleError @ zone.js:522
handleUnhandledRejection @ zone.js:527
_loop_1 @ zone.js:562
drainMicroTaskQueue @ zone.js:566
ZoneTask.invoke @ zone.js:424
zone.js:524 ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Error in ./StatsComponent class StatsComponent - inline templat……}
  • Вопрос задан
  • 659 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
ozknemoy
@ozknemoy
яваскриптист
вот главное Error: Error in ./StatsComponent class StatsComponent - inline template:4:31 caused by: Cannot read property 'sessionsCount' of undefined
исправить разметку
<h3 class="counter__number">{{counters?.sessionsCount}}</h3>

либо в классе определить this.counters = {}
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Angular frontend developer middle+
IT Force • Краснодар
от 200 000 ₽
Senior Backend Engineer в агрегатор нейросетей (150к DAU)
NN Media
от 300 000 до 500 000 ₽
Разработчик фронтенда в Конструктор лендингов
Яндекс • Екатеринбург
от 220 000 до 350 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать логотип
15 мая 2024, в 20:48
5000 руб./за проект
Нарисовать рисунок установки
15 мая 2024, в 20:45
6000 руб./за проект
Автоматич-я классификация в QGIis/ArcGis (срочно). Оплата договорная
15 мая 2024, в 20:43
500 руб./за проект
Ещё заказы