Cannot read property somevalue of undefined in Typescript Angular 5

Question

I am facing below issue when using the Angular 5 Services, Can you please help me what is wrong with the below code

I have gone through below questions but didn't help me

I just want to initialize the value in the class and use it in the method

Though I have defined the url value in the class I'm getting error as Cannot read property 'url' of undefined for the line console.log(this.url);

@Injectable()
export class OwnService {

    public accessTokenvalue = '';
    public url = 'https://www.someurl.com/id=';
    constructor(private hp: HelpService) {
    }

    public gethpPhotos() {
        this.hp.login()
            .then(function (response: LoginResponse) {
                console.log(response);
                console.log(this.url);

            })
            .catch((error: any) => console.error(error));
    }
}

I had the same issue then I just stop the angular cli listener then start again it solved — TAHA SULTAN TEMURI
– TAHA SULTAN TEMURI, Commented Dec 2, 2019 at 11:21

Suren Srapyan · Accepted Answer · 2018-01-22 18:11:16Z

5

You just need to replace function (response: Response) with arrow function. Each function creates it's scope to which refers this inside it. Arrow function will preserve this.

.then((response: LoginResponse) => {
     console.log(response);
     console.log(this.url);
})

answered Jan 22, 2018 at 18:11

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

Comments

Uğur Dinç · Accepted Answer · 2018-01-22 18:13:21Z

2

You can resolve by using the context in which the 'url' exists:

public gethpPhotos() {
       var that = this; // outer context

        this.hp.login()
            .then(function (response: LoginResponse) {
                console.log(response);
                console.log(that.url); // <<<< changed to that.url for the outer context

            })
            .catch((error: any) => console.error(error));
    }

answered Jan 22, 2018 at 18:13

Uğur Dinç

2,4652 gold badges20 silver badges27 bronze badges

Comments

Sajeetharan · Accepted Answer · 2018-01-22 18:17:06Z

2

In your code this refers to the context of the http request. inorder to access the component variable, Use arrow function

this.hp.login()
.then(response: LoginResponse) => {
        this.answerList = response;
         console.log(this.url);
)

answered Jan 22, 2018 at 18:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Cannot read property somevalue of undefined in Typescript Angular 5

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related