What's wrong with my code with Angular and Typescript?

Question

I'm trying to get data from API and bind it to my "headline" property as shown in below code. But what I wrote in the "callback" function: this.headline = res;

does not work, the headline is not bound. However, if I put the same code in the fetchData method, it works! But to me it seems there is no difference? I'm new to Typescript, what am I doing wrong here?

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})

export class HomeComponent {
    public news: News[];
    public headline: News;
    constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {

    }
    ngOnInit() {
        var headurl = this.baseUrl + "api/News/Headline?country=us&category=business";
        this.fetchData(headurl, function (res) {
            //this code does not work
            this.headline = res;
        });

    }

    fetchData(url, callback) {
        this.http.get<News>(url).subscribe(result => {
            callback(result);
            //this code works!
            this.headline = result;
        }, error => console.error(error));

    }
}


interface News {
    SourceId: string;
    SourceName: string;
    Author: string;
    Title: string;
    Description: string;
    Url: string;
    UrlToImage: string;
    PublishedAt: string;
}

Igor · Accepted Answer · 2018-07-30 16:21:57Z

1

You need to use an arrow function so that this is captured when the callback occurs.

ngOnInit() {
    var headurl = this.baseUrl + "api/News/Headline?country=us&category=business";
    this.fetchData(headurl, (res) => {
        this.headline = res;
    });
}

A better design would be to return an Observable to the caller instead of passing a callback to the the method being called and let the caller decide how to handle the result.

ngOnInit() {
    var headurl = this.baseUrl + "api/News/Headline?country=us&category=business";
    this.fetchData(headurl).subscribe((res) => {
        this.headline = res;
    });
}

fetchData(url) : Observable<News> {
    return this.http.get<News>(url);
}

edited Jul 30, 2018 at 16:21

answered Jul 30, 2018 at 16:16

Igor

62.5k10 gold badges111 silver badges181 bronze badges

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

Comments

Titian Cernicova-Dragomir · Accepted Answer · 2018-07-30 20:03:04Z

1

An arrow function captures this from the declaration context while a regular function does not and has this dependent on the caller (basically the caller decides what this to send to the function)

Use the noImplicitThis or strict (although strict turn on a lot more options) compiler options to avoid such errors.

To fix this particular issue also use an arrow function for the first call :

ngOnInit() {
    var headurl = this.baseUrl + "api/News/Headline?country=us&category=business";
    this.fetchData(headurl, (res) => {

        this.headline = res;
    });

}

edited Jul 30, 2018 at 20:03

answered Jul 30, 2018 at 16:17

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Collectives™ on Stack Overflow

What's wrong with my code with Angular and Typescript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related