Ionic 3 - TypeError: Cannot set property 'userRole' of undefined

Question

Trying to replace the menu in an Ionic app for logged in user using Events.

Login.ts

publishLoginDetails = function (_userId, _userRole) {
    this.events.publish('login:success', _userRole);
};

app.component.ts

userRole: string;
pages: Array<{ title: string, component: any, icon: string }>;

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public events: Events) {
    this.initializeApp();

    this.pages = [
      { title: 'Home', component: HomePage, icon: 'home' },
      { title: 'Login', component: LoginPage, icon: 'log-in' }
    ];

    events.subscribe('login:success', function (uRole) {
        if (uRole !== undefined && uRole !== "") {
            this.userRole = uRole;
            switch (uRole) {
                case 'admin': {
                    this.pages = [
                    { title: 'Home', component: HomePage, icon: 'home' },
                    { title: 'Link1', component: Link1Page, icon: 'list' },
                    { title: 'Link2', component: Link2Page, icon: 'person' },
                    { title: 'Logout', component: '', icon: 'log-out' }
                    ];
                    break;
                }
                case 'employee': {
                    this.pages = [
                    { title: 'Home', component: HomePage, icon: 'home' },
                    { title: 'Link1', component: Link1Page, icon: 'people' },  
                    { title: 'Logout', component: '', icon: 'log-out' }
                    ];
                    break;
                }
            }
        }
    }
}

Getting

So modified the declaration of userRole as

userRole: string = "user";
pages: Array<{ title: string, component: any, icon: string }> = [];

As it didn't work, I deleted node_modules and ran "npm install again". Also I ran "npm cache clean" but same error.

Please guide me how to resolve this issue.

Thanks.

Read about arrow function and how it can solve problem with `this` — yurzui, Oct 01 '17 at 13:48

score 0 · Answer 1 · answered Oct 01 '17 at 14:06

Like @yurzui said, use arrow function.

userRole: string;
pages: Array<{ title: string, component: any, icon: string }>;

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public events: Events) {
    this.initializeApp();

    this.pages = [
      { title: 'Home', component: HomePage, icon: 'home' },
      { title: 'Login', component: LoginPage, icon: 'log-in' }
    ];

    events.subscribe('login:success', (uRole) => {
        if (uRole !== undefined && uRole !== "") {
            this.userRole = uRole;
            switch (uRole) {
                case 'admin': {
                    this.pages = [
                    { title: 'Home', component: HomePage, icon: 'home' },
                    { title: 'Link1', component: Link1Page, icon: 'list' },
                    { title: 'Link2', component: Link2Page, icon: 'person' },
                    { title: 'Logout', component: '', icon: 'log-out' }
                    ];
                    break;
                }
                case 'employee': {
                    this.pages = [
                    { title: 'Home', component: HomePage, icon: 'home' },
                    { title: 'Link1', component: Link1Page, icon: 'people' },  
                    { title: 'Logout', component: '', icon: 'log-out' }
                    ];
                    break;
                }
            }
        }
    }
}

Ionic 3 - TypeError: Cannot set property 'userRole' of undefined

1 Answers1