我的Angular和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;
}

Answer 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);
}

Answer 2

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;
    });

}