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

Posted 2023-03-13

【中文标题】使用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)));

【参考方案1】：

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

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