使用Angular 7获取“无法读取未定义的属性'http'”答案

【问题标题】：Getting "Cannot read property 'http' of undefined" with Angular 7使用Angular 7获取“无法读取未定义的属性'http'”
【发布时间】：2019-05-25 18:50:44
【问题描述】：

我正在做一个 Angular 7 项目，我遇到了一个奇怪的问题，我花了相当长的时间来确定，但我不知道为什么会发生这种情况，希望你们能帮助我。我使用 angular-cli 创建了一个服务，然后实现如下：

从'@angular/core'导入{Injectable}；从“@angular/common/http”导入 {HttpClient}；从“rxjs”导入{forkJoin，Observable}；从“rxjs/operators”导入{map}； @可注射（{ 提供在：“根” }) 导出类 SampleService { 构造函数（私有http：HttpClient）{ } 保存（样本：样本）：可观察的 { return this.http.post("http://localhost:3000/samples", sample).pipe(map(this.parser)); } saveAll(samples: Sample[]): Observable { 返回 forkJoin(samples.map(this.save)) } 私有解析器 = (value): Sample => new Sample(value.name); } 出口类样品{ 名称：字符串；构造函数（名称：字符串）{ this.name = 名称； } }

我在每个方法上都设置了一个断点。当我运行它时，我得到以下信息：

如您所见，在第一个断点处似乎一切正常，所以让我们转到下一个。

现在一切都未定义，我在控制台中收到以下错误：

错误类型错误：无法读取未定义的属性“http”

如果我改变这一行：

forkJoin(samples.map(this.save))

到

forkJoin(samples.map(sample => this.save(sample)))

当我重新运行代码时。我明白了：

现在一切似乎都很好，代码运行良好。作为一个 java 开发人员，在类似的情况下，第一种方法可以与方法引用相媲美，它可以正常工作，为什么在 TypeScript 中它不能呢？

【问题讨论】：

这就是 javascript 的工作原理。如果您想保留第一个选项，请将其写为实例函数github.com/Microsoft/TypeScript/wiki/…
它与对象的上下文有关。在第一种情况下，上下文会改变，但在第二种情况下，上下文总是相同的。参考-ryanmorr.com/understanding-scope-and-context-in-javascript
How to access the correct `this` inside a callback?的可能重复
return forkJoin(samples.map(sample => this.save(sample)));

标签： angular typescript rxjs

【解决方案1】：

this 是上下文相关的。使用function 定义的每个函数都有自己的this。箭头函数定义的不同之处在于，它将父上下文绑定到函数体，使this 引用父this。它类似于定义一个函数并显式绑定它：

function(doc){
//function body
}).bind(this)

【讨论】：