Observables - Angular - .map не работает, но .subscribe работает
У меня есть конечная точка, которая называется и выглядит так:
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.info(sub.SubsidiaryName)
subsidiaryNames.push(sub.SubsidiaryName)
})
subsidiaryNames = subsidiaryNames.filter(this.onlyUnique);
console.info('data from subsidiaries' + JSON.stringify(subsidiaryNames))
});
}
Когда это .map, он не работает, но мне нужно, чтобы это был .map, так как мне нужно указать subscribe в другом файле, чтобы я мог асинхронно использовать данные в другом компоненте:
ngOnInit(): void {
this.engagementService.getOrgSubsidiaries(id).subscribe(data => {
this.orgSubsidiaries = data;
});
Мне он нужен, чтобы .map также работал так же, как и subscribe, поэтому я могу использовать subscribe с ним и использовать данные в другом моем компоненте!
В немного другой проблеме эта функция в другом моем компоненте не распознает id.
в angular 6 вам не нужен res.json() на карте, поскольку по умолчанию ответ json
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
использовать трубу в rxjs 6
return this.http.get(url).pipe( map(res => res.json()));
импортировать карту
import { map } from 'rxjs/operators'
res.json() не требуется в Angular 6, если вы используете HttpClient.
Я получаю эту ошибку при наведении указателя мыши на часть карты в вашем ответе «Не удается найти имя» карта ». Вы имели в виду "Карта"? '
Какая у вас версия rxjs?
Я использую версию 6.1.0
npm говорит 6.1.0, но мой пакет json говорит 5.5.0
Ошибка исчезла, но консоль данных по-прежнему не работала,
в angular 6 вам не нужно конвертировать в .json(). Angular сделает это за нас. просто удалите весь оператор карты, если вы используете его только для .json()
Как мне написать строку без .map?
просто return this.http.get(url)
Проблема зависит от двух вещей:
- Какую версию Angular вы используете.
- Используете ли вы
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 как зависимость.
Я angular 6, я пробовал первый метод, ошибок нет, но я все еще не могу консольировать данные, как это было с методом подписки, я не уверен насчет http или клиента, которого я не вижу ни в файл
кроме этого: импортируйте {URLSearchParams, RequestOptions} из '@ angular / http';
Возможно, то, как я написал свою функцию, не будет работать с тем, как работает карта?
Не могли бы вы создать Образец StackBlitz, воспроизводящий эту вашу проблему?
Дайте мне знать, если все в порядке, пожалуйста, извините, это не потрясающе, мои проекты не простые
Мне также понадобится код от EngagementService для работы с ним. Такие вещи, как http, типа Http или HttpClient, нужно понимать.
Hello.component - это сервис взаимодействия.
Как компонент может быть службой? Я хочу видеть, что код вашего файла EngagementService - это то, что я имел в виду.
Я подозреваю, что res.json () внутри map () ломается из-за типа содержимого ответа. Во-первых, убедитесь, что ответ имеет формат JSON (я вижу, что в вашем фрагменте вызывается .json ()). наконец, включите оператор .catch и найдите выданную ошибку, чтобы узнать, почему она не работает. Вы можете увидеть одно из этих сообщений, если в консоль войдете в catch developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…