时间戳

首页 > 解决方案 > 使用Angular 7获取“无法读取未定义的属性'http'”

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

问题描述

我正在做一个 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 中它不能呢？

标签： angulartypescriptrxjs

解决方案

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

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

推荐阅读