The error message "TypeError: Object(...) is not a function" is indicating an issue when attempting to

Here is my code from addevent.ts:

export class EventPage {

eventDetail = {} as EventDetail;

eventDetailRef$: AngularFireList<EventDetail>;

constructor(public navCtrl: NavController, public navParams: NavParams, 
private database: AngularFireDatabase) {
    this.eventDetailRef$ = this.database.list('event-list');
 }

addEvent( eventDetail: EventDetail) {

  this.eventDetailRef$.push({
  eventName: this.eventDetail.eventName,
  eventDesc: this.eventDetail.eventDesc,
  lat: Number(this.eventDetail.lat),
  lgt: Number(this.eventDetail.lgt)
  });

  this.eventDetail = {} as EventDetail;

  this.navCtrl.pop(); 

  }

}

This is the content of showevent.ts:

newEventListRef$ : AngularFireList<EventDetail>;
newEventList$: Observable<EventDetail[]>;

constructor(public navCtrl: NavController, private database: 
AngularFireDatabase) {
this.tabs=["New", "Upcoming"];
this.newEventListRef$ = this.database.list<EventDetail>('event-list');
this.newEventList$ = this.newEventListRef$.valueChanges();
}

And finally, here is showevent.html

<ion-list>
    <ion-item *ngFor="let new of newEventList$ | async">
      <h2>{{new.eventName}}</h2>
      <h4>{{new.eventDesc}}</h4>
      <h6>{{new.lat}}</h6>
      <h6>{{new.lgt}}</h6>
    </ion-item>
  </ion-list>

The issue being faced is a TypeError: Object(...) is not a function

The problem arises when trying to retrieve data from Firebase, despite no error showing in VSCode. As a beginner in Ionic 3, I may have made some basic mistakes, so your understanding is appreciated.

Here is the stack trace for reference:

TypeError: Object(...) is not a function
    at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:78721:76)
    at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:62701:27)
    at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Subject.next (http://localhost:8100/build/vendor.js:23237:25)
    at ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Notification.observe (http://localhost:8100/build/vendor.js:52585:50)
    at AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:81001:40)

Answer №1

To enhance the functionality of your project, it is recommended to update the rxjs package and include rxjs-compat as well. Execute the following command to accomplish this:

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save

Furthermore, ensure that you use the subscribe method when retrieving list data in the following manner:

this.database.list<EventDetail>('event-list').valueChanges().subscribe((eventData) => 
{ 
  console.log("eventDetails data", eventData);
},(err)=>{
   console.log("Error while retrieving eventDetails : ", err);
}); 

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

Get the dynamic type as the return value in a TypeScript abstract class method with generic type T

Within my codebase, I have created an abstract class: export abstract class Filters<P> { protected field: string; protected constructor(field: string) { this.field = field; } protected abstract getFilter(): P; } Additionally, there is ...

An issue has arisen: It seems that properties of null cannot be accessed, particularly the 'toISOString' property

After upgrading the dependencies in my package.json to their latest versions, I encountered an error while accessing a page that calls this data. Given that the dependencies were outdated by at least 2 years or more, I suspect the issue lies with the updat ...

Creating and setting a selected option dynamically in Angular 2 for editing purposes

As I attempt to modify a user, I encounter a scenario where the user possesses a non-primitive array of machines. During editing, my goal is to generate new elements with select options and assign the selected value based on the user object: export class ...

What could be causing this issue of the Angular Material table not displaying properly?

I have been developing a Contacts application using Angular 9 and Angular Material. The goal is to display contact information and an image for each contact in a table row within the list component. Within my app.module.ts, I have imported various modules ...

ng2-dragula error: issues with setting options and dropping version

It seems that version 1.5.0 supports this.dragulaService.setOptions, while version 2.1.1 does not, and vice versa with this.dragulaService.drop subscribe where version 2.1.1 supports it but 1.5.0 does not. Check out the Stackblitz Fork for version 1.5.0 ...

React - A high-capacity file selector component designed to efficiently handle large numbers of files being selected

I am in search of a component that can retrieve a list of files from the user without actually uploading them. The upload functionality is already in place; I simply require a list of selected files. The component must meet the following criteria: Restric ...

Effortlessly adding loading spinners to images with Ionic 2, Ionic 3, and Ionic 4!

My Ionic2 application utilizes ion-img to properly load images, but I am seeking a way to notify the user that the picture is loading. Any suggestions would be greatly appreciated! EDIT : If you must use the ion-img tag, here is the solution. Otherwise, c ...

Roll out a custom-built server for an Angular 7, MongoDB, Express, and Node application

I am seeking to host my Angular application with Node.js, MongoDB, and Express.js on a server of my own. My current deployment method involves: -> ng build --prod (generates output in the dist folder) -> ng serve from the dist directory To start th ...

Utilizing Async/Await to Streamline Google Maps Elevation Requests

I'm struggling to run this in a sequential manner. I've experimented with various methods like using Promise.all and getting stuck in callback hell, but what I really need is to obtain elevations for each point that has a valid altitude value (no ...

Angular Material Dropdown with Multi-Column Support

I'm working on customizing the selection panel layout to display items in multiple columns. However, I'm facing an issue where the last item in each column appears off-center and split, causing overflow into the next column instead of a vertical ...

What is the best way to retrieve JSON data from a raw.github URL and save it into a variable?

Suppose there is a JSON file named data.json on Github. The raw view of the file can be accessed through a URL like this: https://raw.githubusercontent.com/data.json (Please note that this URL is fictional and not real). Assume that the URL contains JSON ...

Is it possible in Angular to directly bind the emitted output of a component to a property?

My primary application component communicates with its sub components using @Output decorated properties on the subcomponent. The output properties utilize an EventEmitter<>(). Typically, these properties emit a simple boolean or number. I want to di ...

Tips on storing and retrieving data between pages in Ionic 4/5: Saving data to a service and accessing it from a

Looking for assistance from the community I am trying to pass data between pages using a service in Angular. Here is the code for the parent component.ts file: import { Component } from '@angular/core'; import { ShareService } from '../sh ...

Step-by-step guide on incorporating HTML into a popover within Angular4

After successfully implementing a hover popover in Angular using PopoverModule from ngx-popover, I now need to modify the content inside the popover. My search led me to this example: <ng-template #popContent>Hello, <b& ...

Issue encountered with Angular Material's md-chips and md-autocomplete: The error message "control.registerOnChange is not a

When attempting to wrap mat-chips and mat-autocomplete into a ControlValueAccessor, I encountered the following errors: InfoEditorComponent.html:17 ERROR TypeError: control.registerOnChange is not a function at setUpModelChangePipeline (forms.js:2701) ...

Steps for integrating .web extension files in React Native Web using Typescript

When using react native web, there is a potential to utilize files with extensions such as .web and .android. For example: myFile.web.js myFile.android.js These files can then be included like so: import myFile from './myFile'; React Native w ...

Exposing the method to the outside world by making it public in

I have a situation where I have a base class with a protected method called foo, and a child class that needs to make this method publicly accessible. Since this method will be called frequently, I am looking for a more efficient solution to avoid unnecess ...

What sets apart the ? operator from incorporating undefined in the type declaration?

Can you explain the distinctions among these options? type A = {a?: string} type A = {a: string | undefined} type A = {a?: string | undefined} In what scenarios would one be preferred over the others? For more information, visit: https://github.com/mic ...

How can Angular HttpClient be used to convert from Http: JSON.parse(JSON.stringify(data))._body?

When using the Http module, you can use this method: Http service: let apiUrl = this.apiUrl + 'login'; let headers = new Headers({'Content-Type': 'application/json'}); return this.http.post(apiUrl, JSON.stringify(model), {h ...

Steps for deleting an item from a list based on a specific condition in Ionic 2

<ion-list> <ion-list-header> <span ion-text bold color="primary"> My Application</span> </ion-list-header> <div *ngIf="userStatus!='Registered' " > <ion-item *ngFor="let type of options" (click)="close( ...