我的 Angular 和 Typescript 代码有什么问题？

Question

我正在尝试从 API 获取数据并将其绑定到我的 "headline" 属性，如下面的代码所示。但是我在 "callback" 函数中写的是： this.headline = 水库；

不行，标题没有绑定。但是，如果我将相同的代码放在 fetchData 方法中，它就可以工作了！但对我来说似乎没有区别？我是 Typescript 的新手，我在这里做错了什么？

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

您需要使用箭头函数，以便在回调发生时捕获this。

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

更好的设计是 return 一个 Observable 给调用者，而不是将回调传递给被调用的方法，让调用者决定如何处理结果。

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

箭头函数从声明上下文中捕获 this，而常规函数则没有，并且 this 取决于调用者（基本上是调用者决定将什么 this 发送给函数)

使用noImplicitThis 或strict（尽管严格启用更多选项）编译器选项可避免此类错误。

要解决此特定问题，请在第一次调用时使用箭头函数：

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

        this.headline = res;
    });

}

我的 Angular 和 Typescript 代码有什么问题？

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

typescript

angular

angular-httpclient