Получение "Не удается прочитать свойство 'http' из неопределенного" с Angular 7

Question

Я работаю над проектом Angular 7 и столкнулся со странной проблемой, которая потребовала у меня довольно много времени, чтобы определить, но я не знаю, почему это происходит, и я надеюсь, что вы, ребята, сможете мне помочь.Я создал сервис с помощью angular-cli, а затем реализовал его следующим образом:

    import {Injectable} from '@angular/core';
    import {HttpClient} from "@angular/common/http";
    import {forkJoin, Observable} from "rxjs";
    import {map} from "rxjs/operators";

    @Injectable({
      providedIn: 'root'
    })
    export class SampleService {

      constructor(private http: HttpClient) {
      }

      save(sample: Sample): Observable {
        return this.http.post("http://localhost:3000/samples", sample).pipe(map(this.parser));
      }

      saveAll(samples: Sample[]): Observable {
        return forkJoin(samples.map(this.save))
      }

      private parser = (value): Sample => new Sample(value.name);
    }

    export class Sample {
      name: string;

      constructor(name: string) {
        this.name = name;
      }
    }

Я установил точку останова для каждого метода.Когда я запускаю его, я получаю следующее:

Как вы видите, все выглядит нормально в первой точке останова, поэтому давайте перейдем к следующей.

Теперь все не определено, и я получаю следующую ошибку в консоли:

    ERROR TypeError: Cannot read property 'http' of undefined

Если я изменю эту строку:

    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)