Свойство 'map' не существует в типе 'Observable & lt; Response & gt;' в Угловом 6 [дубликат]

Используя List, вы можете предотвратить ошибки кастинга. Очень полезно избегать ошибки runtime .

Пример:

Здесь (используя ArrayList) вы можете скомпилировать этот код, но вы увидите ошибка выполнения позже.

ArrayList array1 = new ArrayList();
array1.Add(1);
array1.Add("Pony"); //No error at compile process
int total = 0;
foreach (int num in array1)
{
 total += num; //-->Runtime Error
}

Если вы используете List, вы избегаете этих ошибок:

List list1 = new List();
list1.Add(1);
//list1.Add("Pony"); //<-- Error at compile process
int total = 0;
foreach (int num in list1 )
{
 total += num;
}

Ссылка: MSDN

175
задан Community 23 May 2017 в 12:18
поделиться

15 ответов

Я обновил свой плагин gulp-typescript до последней версии (2.13.0), и теперь он компилируется без сбоев.

UPDATE 1: Я ранее использовал gulp-typescript версию 2.12.0

ОБНОВЛЕНИЕ 2: Если вы обновляетесь до Angular 2.0.0-rc.1, вам необходимо сделать следующее в файле appBoot.ts:

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import { bootstrap } from "@angular/platform-browser-dynamic";
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from "./path/AppComponent";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
// import 'rxjs/Rx'; this will load all features
import { enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser';



//enableProdMode();
bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

Важная вещь, ссылка на es6-shim / index.d.ts

Предполагается, что вы установили пиктограммы es6-shim, как показано здесь:

Подробнее о типизациях установите с углового здесь: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

74
ответ дан Günter Zöchbauer 17 August 2018 в 14:28
поделиться
  • 1
    Можете ли вы упомянуть старый номер версии, в котором была проблема? Благодарю. – Meligy 1 May 2016 в 00:12
  • 2
    @Meligy Я ранее использовал gulp-typescript версии 2.12.0 – brando 1 May 2016 в 02:02
  • 3
    Потрясающие. Я обновил мою статью о сообщении об ошибке map, чтобы включить примечание для пользователей с аналогичными проблемами. Большое спасибо :) – Meligy 1 May 2016 в 06:26
  • 4
    @Meligy У меня была эта же проблема снова, когда я обновился до Angular2 RC. Я обновил свой ответ выше, чтобы показать, как я его решил. – brando 5 May 2016 в 00:56
  • 5
    import 'rxjs/Rx'; // Загружает все функции – VahidN 10 May 2016 в 10:55

Вам нужно импортировать оператор map:

import 'rxjs/add/operator/map'
270
ответ дан 0x1ad2 17 August 2018 в 14:28
поделиться
  • 1
    Рад слышать – 0x1ad2 27 January 2017 в 13:47
  • 2
    Угловая команда и команда RxJS оба НЕ рекомендуют этот подход импорта всего RX, как это. Вы не должны этого делать. Он слишком велик. Первый ответ выше, это хорошо, но второй, не так много. @ 0x1ad2 можете ли вы обновить свой ответ, чтобы не включать этот массивный импорт в качестве второго варианта? – frosty 24 August 2017 в 23:01
  • 3
    Конечно @frosty, имеет смысл, вот вы идете! – 0x1ad2 25 August 2017 в 13:45
  • 4
    @ 0x1ad2 Теперь я его поддержал. Я честно не ожидал ответа на это. Так что большое спасибо! – frosty 25 August 2017 в 14:15
  • 5
    Это неинтуитивно. Где это задокументировано как зависимость от реализации Observable в разработке Angular 2+? – Joe 19 December 2017 в 00:43
  • 6
    – LordDraagon 21 March 2018 в 06:49
  • 7
    – Sachin Divakar 20 May 2018 в 19:19

В моем случае недостаточно включить только карту и обещать:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

Я решил эту проблему, импортировав несколько компонентов rxjs, поскольку официальная документация рекомендует:

1) Импортировать инструкции в один файл приложения / rxjs-operator.ts:

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2) Импортировать rxjs-оператор в вашу службу:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
37
ответ дан Alex Valchuk 17 August 2018 в 14:28
поделиться
  • 1
    Опять же, лучший ответ на вопрос не имеет наибольшего количества голосов. Это лучший ответ на этот вопрос. Спасибо, что поделились. Я хочу, чтобы другие проголосовали за это. – frosty 24 August 2017 в 23:02
  • 2
    ничто не помогает мне на angular4 :( – Anand 26 January 2018 в 15:39

В Angular 2x

В example.component.ts

import { Observable } from 'rxjs';

В example.component.html

  Observable.interval(2000).map(valor => 'Async value');

В Угловом 5x или Угловом 6x:

В example.component.ts

import { Observable, interval, pipe } from 'rxjs';
import {switchMap, map} from 'rxjs/operators';

В example.component.html

valorAsync = interval(2500).pipe(map(valor => 'Async value'));
9
ответ дан Eduardo Cordeiro 17 August 2018 в 14:28
поделиться
  • 1
    почему нам нужно напрямую использовать трубу вместо карты? – Krish 12 July 2018 в 04:09

Аналогичные сообщения об ошибках появятся при переходе с версии 5 на 6. Вот ответ на изменение rxjs-6.

Импортируйте отдельные операторы, а затем используйте pipe вместо цепочки.

import { map, delay, catchError } from 'rxjs/operators'; 

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);
5
ответ дан farrellw 17 August 2018 в 14:28
поделиться

Как я понимаю, это из-за последнего обновления rxjs. Они изменили некоторые операторы и синтаксис. После этого мы должны импортировать rx такие операторы, как

import { map } from "rxjs/operators";

, вместо этого

import 'rxjs/add/operator/map';

И нам нужно добавить трубку вокруг всех операторов, таких как это

this.myObservable().pipe(map(data => {}))

Источник здесь

5
ответ дан Gh111 17 August 2018 в 14:28
поделиться

Rxjs 5.5 «Свойство« map »не существует для типа Observable.

Проблема связана с тем, что вам нужно добавить трубку вокруг всех операторов.

Изменить это ,

this.myObservable().map(data => {})

к этому

this.myObservable().pipe(map(data => {}))

И

Импортируйте карту, подобную этой,

import { map } from 'rxjs/operators';

Она решит вашу вопросы.

37
ответ дан Hiran D.A Walawage 17 August 2018 в 14:28
поделиться
  • 1
    Это также относится к Rxjs 6. Каждый учебник, на который я смотрю, у них есть функция отображения без канала. Это не сработало для меня, пока я не добавил трубку и импортированную карту из «rxjs / операторов» точно так же, как говорится в ответе. – Keyvan Sadralodabai 27 July 2018 в 18:41
  • 2
    Да, это также относится и к Rxjs 6. – Hiran D.A Walawage 30 July 2018 в 11:11

UPDATE 29.09.2016 для Angular 2.0 Final & amp; VS 2015

Обходной путь больше не нужен, чтобы исправить вам просто нужно установить TypeScript версии 2.0.3 .

Исправить из редактирования в этот комментарий для github .

10
ответ дан Jason 17 August 2018 в 14:28
поделиться
  • 1
    У меня есть эта проблема, у меня также установлен 2.0.3: / – Mild Fuzz 1 November 2016 в 15:45
  • 2
    У меня TS 2.1.6, но все еще вижу проблему – alltej 7 March 2017 в 09:45
  • 3
    Во время этого комментария TS самое последнее - 2.5.2. Эта версия ломается для меня. Использование 2.3.x работает. – PigBoT 26 October 2017 в 15:50
import 'rxjs/add/operator/map';

& amp;

npm install rxjs@6 rxjs-compat@6 --save

работал для меня

10
ответ дан Justin Scofield 17 August 2018 в 14:28
поделиться

Я столкнулся с подобной ошибкой. Это было решено, когда я делал эти три вещи:

  1. Обновление до последних rxjs:

npm install rxjs@6 rxjs-compat@6 --save

  1. Импорт карты и обещание: import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise';
  2. Добавлен новый оператор импорта:

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

2
ответ дан lokanath 17 August 2018 в 14:28
поделиться

Если вы используете angular4, используйте ниже импорт. он должен работать.

import 'rxjs / add / operator / map';

Если вы используете угловую5 / 6, используйте карту с трубой и импортируйте ее ниже одного

импортировать {map} из "rxjs / операторов";

1
ответ дан Manas 17 August 2018 в 14:28
поделиться

Как сказал Джастин Скофилд в своем ответе, для последнего выпуска Angular 5 и для Angular 6, как и 1 июня 2018 года, просто import 'rxjs/add/operator/map'; недостаточно для удаления ошибки TS: [ts] Property 'map' does not exist on type 'Observable<Object>'.

Необходимо выполнить команду ниже для установки необходимых зависимостей: npm install rxjs@6 rxjs-compat@6 --save, после которого будет устранена ошибка зависимостей map импорта

8
ответ дан Nitin Bhargava 17 August 2018 в 14:28
поделиться

Похоже, что для последней версии RxJS требуется машинописный текст 1.8, поэтому машинописная версия 1.7 сообщает об этой ошибке.

Я решил эту проблему, обновив ее до последней версии.

7
ответ дан roman 17 August 2018 в 14:28
поделиться

ЗАКЛЮЧИТЕЛЬНЫЙ ОТВЕТ ДЛЯ ТЕХ, ИСПОЛЬЗУЮЩИЙ ANGULAR 6:

Добавьте приведенную ниже команду в ваш файл * .service.ts

import { map } from "rxjs/operators";

**********************************************Example**Below**************************************
getPosts(){
this.http.get('http://jsonplaceholder.typicode.com/posts')
.pipe(map(res => res.json()));
}
}

Я использую окна 10; / g2]

angular6 с машинописным текстом V 2.3.4.0

4
ответ дан Smit Patel 17 August 2018 в 14:28
поделиться

Если вы видите эту ошибку в VS2015, есть проблема github & amp; обходной путь, упомянутый здесь:

https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507

Это помогло мне решить проблему property map does not exist on observable проблема. Кроме того, убедитесь, что у вас есть машинописная версия выше 1.8.2

25
ответ дан The Bearded Llama 17 August 2018 в 14:28
поделиться
  • 1
    Замена C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js на typescriptService работала для VS 15. ( restart vs после замены файла ) – tchelidze 28 May 2016 в 09:57
  • 2
    замена вышеупомянутого файла тоже работала для меня – Krishnan 12 July 2016 в 14:53
  • 3
    Все еще нет обновлений от Microsoft ... Почему они не фиксируют это? – Piotrek 16 August 2016 в 10:42
Другие вопросы по тегам:

Похожие вопросы: