Observables - Angular - .map не работает, но .subscribe делает

Question

У меня есть конечная точка, которая вызывается и выглядит следующим образом:

organizationSubsidiaries(sfid: string) {
  const url = `${this.baseURL}/${ENDPOINTS.organizations}/${this.organization.id}/${ENDPOINTS.subsidiaries}`;
  return this.http.get(url).map(res => res.json());
}

Если я так ее называю, она работает и утешается правильно:

getOrgSubsidiaries(id) {
  return this.organizationSubsidiaries(id)
    .subscribe(data => { //changing this to .map means it won't work!

      let subsidiaryNames = []
      data.forEach(sub => {
        console.log(sub.SubsidiaryName)
        subsidiaryNames.push(sub.SubsidiaryName)
      })
      subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);

      console.log('data from subsidiaries' + JSON.stringify(subsidiaryNames))

    });
}

, когда .mapон не работает, но мне нужно, чтобы он был .map, так как мне нужно subscribe к нему в другом файле, чтобы я мог асинхронно использовать данные в другом компоненте:

ngOnInit(): void {
  this.engagementService.getOrgSubsidiaries(id).subscribe(data => {
     this.orgSubsidiaries = data;
});

Мне это нужно.map также работает как subscribe, поэтому я могу subscribe использовать его и использовать данные в моем другом компоненте!спасибо!

В немного другой проблеме эта функция в моем другом компоненте не распознает идентификатор.

Answer 1

Проблема зависит от двух вещей:

1. Какую версию Angular вы используете.
2. Используете ли вы HttpClient или Http

---

Сначала поговорим о версии Angular:

Если вы используете Angular 6, он поставляется с Rxjs 6. Так что для любого значения типа Observableвы не сможете использовать операторы типа map напрямую, импортируя их из их путей и связывая их со значением Observable.В этом случае вам нужно будет использовать .pipe, который будет доступен для значения Observable, а внутри этого .pipe вы можете использовать своих операторов.

Например:

import { map } from 'rxjs/operators';
...
return this.http.get('...').pipe(map(...))  // This returns an Observable too

Если вы используете Angular 5, 4 или 2, он поставляется с предыдущими версиями Rxjs.Таким образом, для любого значения типа Observable вы можете использовать операторы типа map напрямую, импортируя их из их путей и связывая их со значением Observable.В этом случае вам не нужно будет использовать .pipe

Например:

import 'rxjs/add/operators/map';
...
return this.http.get('...').map(...)  // This returns an Observable too

---

Теперь давайте поговорим о том, используете ли вы HttpClient или Http:

Если вы используете HttpClient, вам не нужно сопоставлять ответ, вызывая .json.Таким образом, вы можете просто сделать:

constructor(private http: HttpClient, ...) {}
...
return this.http.get(...); // This will return the Actual Response DATA

Если вы используете Http, вам придется map ответить, позвонив на него .json.

Такв случае Angular 2,4,5 это будет выглядеть примерно так:

import 'rxjs/add/operators/map'
...
constructor(private http: Http, ...) {}
...
return this.http.get(...).map(res => res.json());

А в случае Angular 6, я думаю, Http был удален.Таким образом, вы не сможете внедрить его как зависимость в первую очередь.

ОБНОВЛЕНИЕ

Я думаю, проблема в том, что вы не внесли Http или HttpClient какЗависимость в вашем EngagementService сервисе.И, следовательно, ошибка.

В случае Angular 6:

Просто добавьте также constructor, который добавляет HttpClient в качестве зависимости.

Answer 2

использовать канал в rxjs 6

 return this.http.get(url).pipe( map(res => res.json()));

импортировать карту

import { map } from 'rxjs/operators'