Not sure why this is happening here, I am getting this error from my ponent:

ERROR TypeError: Cannot read property 'timezone_offset' of undefined
at Object.eval [as updateRenderer] (SettingsComponent.html:16)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14377)
at checkAndUpdateView (core.js:13513)
at callViewAction (core.js:13858)
at execComponentViewsAction (core.js:13790)
at checkAndUpdateView (core.js:13514)
at callViewAction (core.js:13858)
at execEmbeddedViewsAction (core.js:13816)
at checkAndUpdateView (core.js:13509)
at callViewAction (core.js:13858)

Interestingly enough it still displays the correct string in the template and there are no errors in ng-cli. Here is the code for the ponent producing the error:

import { Component, OnInit } from '@angular/core';
import { GetProfileService } from '../../services/get-profile.service';

@Component({
    selector: 'app-settings',
    templateUrl: './settingsponent.html'
})
export class SettingsComponent implements OnInit {

    results: any;
    profile: any;

    constructor(private getProfileService: GetProfileService) { }

    ngOnInit() {

        this.getProfileService.profileAPI().subscribe(
            data => {
                this.results = data
                this.profile = this.results
                console.log(this.profile)
            }
        );

    }

}

I am for now just using {{ profile.timezone_offset }} as the only thing on my template...

Not sure why this is happening here, I am getting this error from my ponent:

ERROR TypeError: Cannot read property 'timezone_offset' of undefined
at Object.eval [as updateRenderer] (SettingsComponent.html:16)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14377)
at checkAndUpdateView (core.js:13513)
at callViewAction (core.js:13858)
at execComponentViewsAction (core.js:13790)
at checkAndUpdateView (core.js:13514)
at callViewAction (core.js:13858)
at execEmbeddedViewsAction (core.js:13816)
at checkAndUpdateView (core.js:13509)
at callViewAction (core.js:13858)

Interestingly enough it still displays the correct string in the template and there are no errors in ng-cli. Here is the code for the ponent producing the error:

import { Component, OnInit } from '@angular/core';
import { GetProfileService } from '../../services/get-profile.service';

@Component({
    selector: 'app-settings',
    templateUrl: './settings.ponent.html'
})
export class SettingsComponent implements OnInit {

    results: any;
    profile: any;

    constructor(private getProfileService: GetProfileService) { }

    ngOnInit() {

        this.getProfileService.profileAPI().subscribe(
            data => {
                this.results = data
                this.profile = this.results
                console.log(this.profile)
            }
        );

    }

}

I am for now just using {{ profile.timezone_offset }} as the only thing on my template...

• javascript
• angular
• typescript

Share Improve this question Follow asked Dec 5, 2017 at 15:12 Sandra WillfordSandra Willford 3,8091515 gold badges5353 silver badges101101 bronze badges 4

• 1 Please show your template. May be due to asynchronous operation, you are getting that error. Try {{ profile?.timezone_offset }}. – Amit Chigadani Commented Dec 5, 2017 at 15:15
• 1 Have you tried {{ profile?.timezone_offset }} ? – Zammy Commented Dec 5, 2017 at 15:16
• yes that seemed to fix the issue. would you mind explaining to me what the ? does – Sandra Willford Commented Dec 5, 2017 at 15:16
• @SandraWillford I have added some explanation in my answer. Please do check. – Amit Chigadani Commented Dec 5, 2017 at 15:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

It seems that your data has not been loaded within the profile object at the time when it was rendered. Only after the pletion of asynchronous operation data is set within the profile object. ?. should be used when your object is operating on asynchronous call. timezone_offset will be evaluated only when the profile object is defined.

Due to asynchronous operation, you might be getting that error. Try the following

{{ profile?.timezone_offset }}

Use the ?. safe navigation operator <= documentation

{{ profile?.timezone_offset }}

It checks if profile exists before trying to access values from it. This is usefull if profile is loaded asynchronous.