Unable to subscribe due to the return value being an AnonymousSubject rather than an Observable

I am facing an issue in Angular 4 where I am attempting to retrieve details from a specific user when clicking on the 'user link profile'.

However, I am unable to subscribe to my function because the return value of switchMap is AnonymousSubject instead of Observable:

    ngOnInit() {
    this.route.paramMap.switchMap((params: ParamMap) => this.getHero(+params.get('id')))
      .subscribe(hero => {
        this.hero = hero;
      })
  }

Below is the getHero function being used:

  getHero(id: number) {
     return this.getHeroes().find(hero=>hero.id===id);
  }

The getHeroes() function retrieves simple objects of JSON data containing details about heroes such as their ID and name.

Appreciate any help or suggestions!

javascriptangulartypescriptobservable

Answer №1

To use switchMap, make sure the method returns an Observable, Promise, Array, or Iterable. The current getHero function is returning an object. Modify it to return an observable containing the object value instead.

getHero(id: number) {
    let hero = this.getHeroes().find(hero => hero.id === id);
    return Observable.of(hero);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show several fresh windows

Greetings everyone. Let me explain my current situation: I have a search page where users can select a product from a drop-down list, and upon clicking a button, a gridview is displayed showing the specifications of the selected product. What I'm a ...

asp.netjavascriptgridviewsession

How can you temporarily delay the original ajax request until a certain condition is satisfied before proceeding?

I'm looking to set up a recaptcha process that intercepts all ajax requests before they are executed - here's how I envision the process unfolding: A user performs an action that triggers an ajax request. If the user has already completed the r ...

javascriptjqueryajaxasynchronous

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

javascripthtmlcsstwitter-bootstrap

The Ajax function is unable to accept JSON data as input

I am trying to figure out why I am unable to access data from a JSON object (json.projects[i].projName) when calling it from within an AJAX function. Below is the code that demonstrates this issue: var json = JSON.parse(data); for (var i = 0; i < json ...

javascriptjqueryjsonajax

Is it possible to programmatically include a getter method to a class in JavaScript or TypeScript?

My current focus is on TypeScript and I'm exploring the decorators functionality. I would greatly appreciate some guidance or expert knowledge on JavaScript capabilities in this area. I am curious about dynamically adding a getter method to a Prototy ...

javascripttypescriptprototypegetter

Adding form input fields in real-time by clicking the add button

Currently, I am looking to develop a party hosting application using Ionic 2. My main goal is to have the ability to add form input fields for guests dynamically by clicking on an "add" button. Do you have any suggestions on how this can be achieved in I ...

angularionic2

Implementing TypeScript module resolution with Cucumber-js can be a bit tricky

Currently, I am in the process of creating a Proof of Concept for Cucumber-js using TypeScript. Everything is going smoothly except for one issue - I am facing difficulties when it comes to configuring the module resolution while utilizing tsconfig-paths. ...

typescriptcucumbercucumberjs

Submitting the form leads to an empty dynamically added row

I am currently working on a gender overview that allows you to edit, add, or delete genders using a simple table. The functionality of adding and deleting rows is already implemented. However, I am facing issues with displaying the correct web API data as ...

angulartypescriptangular-formbuilder

Enhance User Experience with React JS Multi-Select Dropdown Feature

I am dealing with 4 select dropdowns. The values selected should not be available in the remaining dropdown lists. Here is an overview of my state: this.state = { selectedDropdownArray: {}, dropdownArray: ['select', '1', &apos ...

javascriptreactjsselectdrop-down-menu

substituting the deep watcher in Angular

In my application, I am working with a data object called fulldata, which consists of an array of objects. fulldata = [ {'key': 'abc', values: {.....},....}, {'key': 'efg', values: ...

javascriptangularjs

Comparing NativeScript and Flutter

Currently diving into the world of Native Script with Angular, I am fascinated by the code sharing capabilities that allow me to work on both web and mobile applications. However, a lingering question in my mind is why Google chose to develop Angular for ...

angularflutternativescript

Ways to increase the date by one month in this scenario

I am facing an issue with manipulating two date variables. One of the dates is set to last Friday by default, and I am attempting to add a month to this date using the code snippet below. However, it does not produce the desired result. var StartDate = ne ...

javascriptjquery

Recursion using Node.js Promises

I'm facing some difficulties while iterating through my Promises and completing my parser code: let startFrom = 0, totalRecords = 10000, doneRecords = 0 const rows = 10 const parserRequests = function () { if (startFrom <= totalRecords) { ...

javascriptnode.jsrecursionpromise

Encountered issue with accessing the Error Object in the Error Handling Middleware

Below is the custom error validation code that I have developed : .custom(async (username) => { const user = await UserModel.findOne({ username }) if (user) throw new ConflictError('username already used& ...

node.jstypescriptexpressexpress-validator

Next.js is constantly fetching data with React Query

Within my Next.js project, I incorporated a query client into a page component, utilizing getServerSideProps for server-side rendering. The structure of the page is as follows: const Index = ({ configData }) => { const { t } = useTranslation(); cons ...

javascriptreactjsnext.jsreact-query

NGXS: Issue with passing objects to "setState" occurs when any of the patched inner fields is nullable or undefined

In my Angular components, I have created a class that is responsible for storing the state: export class MyStateModel { subState1: SubStateModel1; substate2: SubStateModel2; } This class has simple subclasses: export class SubStateModel1 { someField ...

angulartypescriptngxs

A guide to implementing angularjs app.service and $q in typescript

I am fairly new to TypeScript and AngularJS and I am struggling to find the correct answer for my issue. Below is the relevant code snippet: export class SidenavController { static $inject = ['$scope', '$mdSidenav']; constructor(p ...

angularjstypescriptangular-material

Implementing a click event on a button within an infowindow on Google Maps in Angular

I've successfully set up the infowindow on my Google Maps and I'm looking to include a button inside it. Here's the code I used: InitializeMap() { this.map = new google.maps.Map(document.getElementById('map'), { zoom: 10, cen ...

angulargoogle-mapsinfowindow

Does the Typescript compiler sometimes skip adding braces?

I am encountering a problem with compiling a specific section of code in my Angular2 project. public reloadRecords() { let step = (this.timeInterval.max - this.timeInterval.min) / this.recordsChartSteps; let data = new Array(this.recordsChartSteps ...

typescript

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

I've been searching for the answer to this problem without any luck. I have a page with jquery ajax calls to an API service. It works well in Chrome, Safari, Firefox, and IE 10, but fails in IE 9 and 8. Here is the code: $.ajax({ ...

javascriptjqueryhtmlajaxinternet-explorer