When subscribing to an Observable of type number or string (union type), NaN values are returned for string inputs

Question

When subscribing to an Observable of type number or string (union type), NaN values are returned for string inputs

Within a component, I have a public member that is defined as follows:

public docId$: Observable<number | string>;

This means that the document ID can either be an integer or a string. Upon initializing in ngOnInit, I have the following code snippet:

this.docId$.subscribe(value => {
    // perform operations using the value
    // when the value is a string, it evaluates to NaN
});

Unfortunately, this setup doesn't handle cases where the document ID is a string properly. The value ends up being NaN. Is there a way to make observables of union types work correctly in this scenario?

angular typescript union-types

Answer 1

Answer №1

Utilizing the union type seems to be functioning fine. Take a closer look at the data you're receiving. Here is an example that works: https://stackblitz.com/edit/angular-rur73e

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  private subject = new Subject<number | string>();
  public documentId$: Observable<number | string> = this.subject.asObservable();

  ngOnInit() {
  this.documentId$.subscribe(value => {
    // process value
    // NaN is returned when value is a string
    console.log(value);
  });
  this.subject.next("abc");
  this.subject.next(3);
  this.subject.next(Date.now());
  }
}

The output displayed in the console is:

abc
3
1571682486949

Answer 2

Utilizing the union type seems to be functioning fine. Take a closer look at the data you're receiving. Here is an example that works: https://stackblitz.com/edit/angular-rur73e

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  private subject = new Subject<number | string>();
  public documentId$: Observable<number | string> = this.subject.asObservable();

  ngOnInit() {
  this.documentId$.subscribe(value => {
    // process value
    // NaN is returned when value is a string
    console.log(value);
  });
  this.subject.next("abc");
  this.subject.next(3);
  this.subject.next(Date.now());
  }
}

The output displayed in the console is:

abc
3
1571682486949

When subscribing to an Observable of type number or string (union type), NaN values are returned for string inputs

Answer №1

Similar questions

The combination of Object.keys() and the find function

How to stop a checkbox from being selected in Angular 2

Can you send the value of an Angular-generated input to a function even if it doesn't have an ID associated with it?

How to remove a specific type from a generic type in Typescript without using Exclude<>?

Encountering a "Error: Uncaught (in promise): EmptyError: no elements in sequence" due to the presence of multiple Angular 9 Route Resolvers

Utilizing Router Outlet in Angular to Access API Data

RTK update mutation: updating data efficiently without the need to refresh the page

Scheduled task for sending emails using NodeJS

Sending JSON RPC post requests in Angular 4

Modify the name of the document

Visual Studio 2015 does not support compiling typescript files

Executing a function within JSX to dismiss a modal in NextJS

Tips for capturing an error generated by a child component's setter?

Customize the style of Angular Material within an Angular component

Eliminate the usage of JSON.stringify in the Reducer function

During the process of adding a new template to my Angular project, I came across an issue within the core.min.js and script.js files

Developing Your Own Local Variable in Angular with Custom Structural Directive ngForIn

Module Z encountered an unforeseen issue with the import of value X while utilizing the --aot flag

By utilizing custom typeRoots while continuing to export these types alongside the entry point

Update the options in a dropdown menu after submitting a modal form