ERROR TypeError: Cannot read property '...' of undefined

Question

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

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 component producing the error:

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

@Component({
    selector: 'app-settings',
    templateUrl: './settings.component.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...

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

Amit Chigadani · Accepted Answer · 2017-12-05 15:25:48Z

3

It seems that your data has not been loaded within the profile object at the time when it was rendered. Only after the completion 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 }}

edited Dec 5, 2017 at 15:25

answered Dec 5, 2017 at 15:17

Amit Chigadani

29.9k14 gold badges88 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zammy · Accepted Answer · 2017-12-05 15:17:57Z

2

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.

answered Dec 5, 2017 at 15:17

Zammy

5733 silver badges23 bronze badges

Collectives™ on Stack Overflow

ERROR TypeError: Cannot read property '...' of undefined

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related