The argument provided does not match the expected parameters

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EventDetail } from '../../models/event-detail/event-detail.interface';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@IonicPage()
@Component({
  selector: 'page-event',
  templateUrl: 'event.html',
})
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-detail');
  }

  addEvent( eventDetail: EventDetail) {

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

  }

}

i came across a tutorial about Angular a year ago and recently read "Upgrading to Angularfire 5.0", but when I encountered an error and searched for solutions online, the results were quite varied.

The error message says:

"Argument of type '{ eventName: string; eventDesc: String; }' is not assignable to parameter of type 'EventDetail[]'. Object literal may only specify known properties, and 'eventName' does not exist in type 'EventDetail[]'."

This is how my EventDetail Interface looks like:

export interface EventDetail {
    eventName: string;
    eventDesc: String;
    lat: number;
    lgt: number;

}

here's the image showing the error

Answer №1

Update

eventDetailRef$: AngularFireList<EventDetail[]>;
to
eventDetailRef$: AngularFireList<EventDetail>

This change is necessary because your current type is Array<Array> and you are attempting to insert a single element.

Answer №2

element, it is highlighted that you are encountering an issue while attempting to assign { eventName: string; eventDesc: String; } to an array of EventDetail. The key aspect to note is that the push method requires an array as input, rather than a solitary instance.

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

Is it possible to globally modify the component reference <dropdown-component> name in Angular during runtime in a dynamic manner?

I am currently working on an application that utilizes a component called "dropdown-component" throughout its pages. However, due to specific business requirements, I have been tasked with replacing "dropdown-component" with "custom-dropdown-component". Un ...

Ensure that the method is passed a negative number -1 instead of the literal number 1 from an HTML error

This is an example of my HTML code: <button (mousedown)="onMouseDown($event, -1)"></button> Here is the TypeScript code for handling the mouse down event: onMouseDown(e: MouseEvent, direction: 1|-1) { this.compute.emit(direction); ...

Incorporating the Chartist plugin into an Angular 5 application

Currently, I am facing an issue while attempting to create a project in Angular 5 that involves utilizing chartist @types and js files of chartist plugins. Interestingly, the files compile without any issues in Angular 4, but encounter difficulties when t ...

Combining and consolidating data from state using Angular with ngrx

I've been struggling to come up with a way to create a grouped and summarized array of values (to be used with ngFor) from a list of objects, but I just can't seem to get it right. The data, which is a subset of my state, is structured like this: ...

Is it necessary for me to be familiar with AngularJS in order to redesign an app for Angular 2+

I'm curious - when rewriting an application from AngularJS to Angular 2+, do you need to be familiar with both, or is knowing just Angular 2+ sufficient? ...

Determining if a number exceeds 3 decimal points using AngularJS

I have encountered a problem where I need to determine if a value has more than three decimal places in AngularJS. Although I am familiar with checking if a value is a whole number or greater than zero, I am unsure how to perform this specific task. Below ...

Creating a function that utilizes a default argument derived from a separate argument

Consider this JavaScript function: function foo({ a, b, c = a + b }) { return c * 2; } When attempting to add type annotations in TypeScript like so: function foo({ a, b, c = a + b }: { a?: number, b?: number, c: number }): number { return c * 2; } ...

Creating an Express server using Webpack, TypeScript, and ESM

Hello, I am currently working on a small project using node.js and TypeScript with webpack. Here is a snippet of my tsconfig.json file: tsconfig.json { "compilerOptions": { "lib": ["ESNext"], "target": "ES2020", "module": "NodeNext", "mod ...

Difficulty in activating or deactivating form controls in Angular 2 upon receiving an HTTP response

When using formcontrol in Angular, I encountered an issue where I tried to disable the form control based on a variable assigned from an HTTP response. Angular2 gave me a warning message. The warning mentioned that it's not recommended to use the dis ...

Type inference and the extends clause in TypeScript 4.6 for conditional types

My focus was on TypeScript 4.7 when I created the following types: const routes = { foo: '/foo/:paramFoo', bar: '/bar/:paramFoo/:paramBar', baz: '/baz/baz2/:paramFoo/:paramBar', } as const; type Routes = typeof routes; ...

What is the best way to divide a bootstrap card into two columns?

Currently, in my Angular 9 application, I have a component that utilizes Bootstrap cards. My objective is to create the following layout within this component: For the desktop view, the layout should resemble the image below: https://i.sstatic.net/3MGKm. ...

Navigating with Angular 4's router and popping up modals

I have an Angular 4 SPA application that utilizes the Angular router. I am looking to create a hyperlink that will open a component in a new dialog using Bootstrap 4. I am able to open modal dialogs from a function already. My question is, how can I achi ...

Guide on implementing a .catch method in Firebase's onSnapshot function

I have recently developed an Ionic Firebase chat application. I seem to be encountering an issue with setting up a query snapshot when initializing the message page. Here is the code snippet that I am using: ngOnInit() { this.messageService.getA ...

Strategies for resolving linter problems involving mixins in vue-typescript

Scenario: I am currently working on a project where I am implementing mixins to engage with data from components and other methods. Despite the code functioning as expected, I am encountering errors in Vetur indicating that the method does not exist in ...

Angular2 - Easily update form fields with just a click

I have a form that retrieves data from a service and presents it in the following format: @Component({ selector: 'profile', template: `<h1>Profile Page</h1> <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()" #f="ngFor ...

Detecting Changes and Handling Events Beyond Angular's Scope

After setting up my Angular 7 Application, I integrated a large external library successfully. The only issue I encountered was with an event from this external source. An event listener in the external source triggers and sends data to my Angular App. e ...

Is there a user-friendly mySQL tool that simplifies the process of executing joins?

Has there been any development in mySQL frontends, such as phpmyadmin, that offer a visually appealing interface for performing joins? I am aware that phpmyadmin allows for running saved queries, which may involve joins, but I am curious to see how other ...

Effectively enhance constructor by incorporating decorators

Is it possible to properly extend a class constructor with decorators while maintaining the original class name and static attributes and methods? Upon reading the handbook, there is a note that cautions about this scenario: https://www.typescriptlang.or ...

Iterate through controls to confirm the accuracy of the password输入 unique

Struggling a bit here since ControlGroup is no longer available. I need to ensure that two passwords match on the front end. this.updatePassordForm = _form.group({ matchingPassword: _form.group({ password: new FormControl('' ...

Tips for troubleshooting errors when starting a new Angular project

Journey On my Windows machine, I initially had npm 6.4.1 and node 8.12.0 installed. I decided to upgrade in the following sequence: Started with upgrading npm Then moved on to upgrading node However, now when attempting to create a new app, I encounte ...