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

Question

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

    从“@angular/core”导入 {Injectable}；
    从“@angular/common/http”导入{HttpClient}；
    从“rxjs”导入 {forkJoin, Observable};
    从“rxjs/operators”导入{map}；

    @Injectable({
      提供在：'根'
    })
    导出类 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 中不行？

Answer 1

this是上下文相关的。每个使用function定义定义的函数都有自己的this。箭头函数定义的工作方式不同，它将父上下文绑定到函数体，从而this引用父函数this。它类似于定义一个函数并显式绑定它，如下所示：

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