Issue with Async Pipe when connected to a recently generated observable is causing failures

Question

Issue with Async Pipe when connected to a recently generated observable is causing failures

Encountering an error when trying to use the Async Pipe with a newly created Observable?

"Cannot read property 'subscribe' of undefined"

Check out this Plunkr for a demonstration: https://plnkr.co/edit/vljXImCYoNubjyxOaWo3?p=preview

If you comment out

private asyncList: Observable<string[]> = new Observable<string[]>();

and uncomment

//private asyncList: Observable<string[]>;

the page should load without any issues. It might be a simple oversight, but it's causing some confusion.

This Plunkr was based on someone else's work, so please overlook any unconventional naming or practices you come across.

angular typescript rxjs

Answer 1

Answer №1

When utilizing new Observable(), it essentially equates to invoking Observable.create(). This requires supplying a "subscription" function that emits values to the observer upon subscription. For example:

const asyncList = new Observable<string[]>(observer => observer.next('Hi'));

It is important to note that any errors in your demonstration will be thrown by the Observable itself, not within the pipe.

An interesting discovery is the fact that the parameter in the Observable class can be optional. It remains unclear under what circumstances one would choose to omit it...

Answer 2

When utilizing new Observable(), it essentially equates to invoking Observable.create(). This requires supplying a "subscription" function that emits values to the observer upon subscription. For example:

const asyncList = new Observable<string[]>(observer => observer.next('Hi'));

It is important to note that any errors in your demonstration will be thrown by the Observable itself, not within the pipe.

An interesting discovery is the fact that the parameter in the Observable class can be optional. It remains unclear under what circumstances one would choose to omit it...

Issue with Async Pipe when connected to a recently generated observable is causing failures

Answer №1

Similar questions

What is the best method to reset values in ngx-bootstrap date picker?

Utilizing Angular 2: Implementing a template-driven form to send data from a chosen element to the submitting object

Replace a portion of text with a RxJS countdown timer

Issue encountered while executing jest tests - unable to read runtime.json file

Angular Custom Pipe - Grouping by Substrings of Strings

Error Encountered when Trying to Utilize Vue Component Getter in TypeScript Mixin (Error Code: TS233

Is it possible to manipulate an Object within Object typescript?

Combining types: unable to utilize the second optional type within a for loop

Utilizing Angular to Handle Undefined Variables in String Interpolation

Removing a targeted element from an array in Angular

Angular 11 - Binding Data to an Array Element

Make sure to implement validations prior to sending back the observable in Angular

Angular 6 application experiencing an issue where the browser console is not displaying an error that says "Cannot GET /

Issues with Injectable Service within Another Service in Angular 2

Setting default properties for Ionic Components can be achieved by following this guide

Creating a personalized connect function in Typescript for react-redux applications

An unexpected error occurred during Azure Pipeline's end-to-end testing: Chrome encountered an issue while attempting to launch and exited in an

Is it possible to deactivate input elements within a TypeScript file?

BrowserSync initiates without any access URLs specified

Tips on downloading a dynamically created XML file using ServiceStack and Angular