Angular error TS2769: None of the available overloads match this call. Overload 1 of 3

I encountered an issue while attempting to retrieve all data from the Firebase real-time database:

After removing async from the template, the error disappeared but no data was fetched! I'm confused about what exactly is causing this problem!!

This is my TypeScript code:

tutos?:Tutorial[];
retrievetutos(): void {
    this.menuService.getAll().snapshotChanges().pipe(
      map(changes =>
        changes.map(c =>
          ({ key: c.payload.key, ...c.payload.val() })
        )
        
      )
    ).subscribe(data => {
      this.tutos = data;
    });
  }

HTML:

<tr *ngFor="let tuto of tutos | async">
              <td>{{tuto.name}}</td>
              <td>{{tuto.price}}</td>
              
            </tr>

The Error:

Error: src/app/components/dashboard/dashboard.component.html:49:37 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(obj: Observable<any[] | Iterable<any> | undefined> | Subscribable<any[] | Iterable<any> | undefined> | Promise<any[] | Iterable<any> | undefined>): any[] | ... 2 more ... | undefined', gave the following error.
    Argument of type 'any[] | undefined' is not assignable to parameter of type 'Observable<any[] | Iterable<any> | undefined> | Subscribable<any[] | Iterable<any> | undefined> | Promise<any[] | Iterable<any> | undefined>'.
      Type 'undefined' is not assignable to type 'Observable<any[] | Iterable<any> | undefined> | Subscribable<any[] | Iterable<any> | undefined> | Promise<any[] | Iterable<any> | undefined>'.
  Overload 2 of 3, '(obj: null | undefined): null', gave the following error.
    Argument of type 'any[] | undefined' is not assignable to parameter of type 'null | undefined'.
  Overload 3 of 3, '(obj: Observable<any[] | Iterable<any> | undefined> | Subscribable<any[] | Iterable<any> | undefined> | Promise<any[] | Iterable<any> | undefined> | null | undefined): any[] | ... 2 more ... | undefined', gave the following error.
    Argument of type 'any[] | undefined' is not assignable to parameter of type 'Observable<any[] | Iterable<any> | undefined> | Subscribable<any[] | Iterable<any> | undefined> | Promise<any[] | Iterable<any> | undefined> | null | undefined'.
      Type 'any[]' is not assignable to type 'Observable<any[] | Iterable<any> | undefined> | Subscribable<any[] | Iterable<any> | undefined> | Promise<any[] | Iterable<any> | undefined> | null | undefined'.
        Type 'any[]' is missing the following properties from type 'Observable<any[] | Iterable<any>': source, operator, lift, subscribe, and 2 more.

49             <tr *ngFor="let tuto of tutos | async">
                                   ~~~~
angulartypescriptfirebasefirebase-realtime-databaseangular13

Answer №1

Using the Angular async pipe requires Observable variables. If your "tuto" variable is not an observable, that might be why you're experiencing an error.

To resolve this issue, consider converting it into an observable (without subscribing):

this.tuto$ = this.menuService.getAll().snapshotChanges().pipe(
      map(changes =>
        changes.map(c =>
          ({ key: c.payload.key, ...c.payload.val() })
        )
      )
    );

In your template, use the async pipe for subscription:

<tr *ngFor="let tuto of tutos$ | async">

If the data is still not displaying, try these steps:

  • Check your browser's network tab to ensure data is being fetched with 
    this.menuService.getAll().snapshotChanges()
  • Add a console.log within your map(changes => function to verify the mapping process

Following these suggestions should help resolve the issue.

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

How is it that TypeScript still expects a valid return from an overridden method, even when it cannot be reached?

After creating a generic RESTClient with some abstract functions, I encountered an issue where not all REST actions are implemented. In these cases, I wanted to throw an error. The problem arose when trying to override the TypeScript method to both return ...

typescriptoverloadingabstract-class

Retrieve the keys of an interface using generic methods

Recently, I encountered a challenge with a function that utilizes generics. The specific generic in question is <T extends anInterfaceName>. Struggling to retrieve the keys of the interface used in T within the function, my quest for a solution led m ...

node.jstypescript

The Express server is unable to receive authentication headers sent by the Angular HttpClient

I am in the process of developing an application that allows users to log in and view their profiles. In order to achieve this, I have set up an endpoint on the server: router.get('/profile', passport.authenticate('jwt', {session:false ...

angularexpresshttpauthenticationjwt

TypeScript encounters difficulty locating the div element

Recently attempted an Angular demo and encountered an error related to [ts] not being able to locate a div element. import { Component } from "@angular/core"; import { FormControl } from "@angular/forms"; @Component({ selector: "main", template: ' ...

angulartypescriptasp.net-core-2.0

Implementing noData functionality in highcharts using angular

I want to activate the "noData" feature, which shows a message when there is no data for the chart. According to the documentation, this feature requires loading the file no-data-to-display.js on the page. The file is already in the node_modules/highchart ...

angularhighchartsangular2-highcharts

Can we move the "user" object to the forefront and retrieve it from a location other than the "on.AuthSateChanged(user => .... }" function?

Is there a way to define a ref in vuefire to firebase path that relies on the current User object? Can I bring the "user" object to the top level so it can be accessed outside the "on.AuthSateChanged(user => .... }" block? firebase-config.js import * ...

javascriptfirebasefirebase-realtime-databasevue.jsvuefire

Dynamically binding button types with Angular Material

Incorporating Angular Material into my project has been a goal of mine. I am looking to dynamically set the button type based on a variable, but I am encountering some challenges. This is what I have attempted: export class ButtonComponent { type: ' ...

angularbuttonangular-material

How to resolve the Angular SSR authentication guard issue to briefly display the login page upon refreshing?

I have a love-hate relationship with auth.guard.ts: import { Injectable } from '@angular/core'; import { CanActivateChild, Router } from '@angular/router'; import { Observable, of } from 'rxjs'; import { AuthService } from &a ...

angularexpressserver-side-rendering

Select a single radio button containing values that can change dynamically

<input type="radio" on-click="checkDefaultLanguage" id="checkbox" > [[names(name)]] This custom radio input field contains dynamic values and I am attempting to create a functionality where only one radio button can be selected at a time while dese ...

javascripttypescript

"Classes can be successfully imported in a console environment, however, they encounter issues when

Running main.js in the console using node works perfectly fine for me. However, when I attempt to run it through a browser by implementing an HTML file, I do not see anything printed to the console. Interestingly, if I remove any mentions of Vector.ts fro ...

javascripthtmltypescript

Issue with adding HTTP headers in Ionic 3?

I am facing an issue where I need to include a header in all my HTTP requests, but after implementing the code none of my API calls seem to be working. In the code below, the first function is responsible for making the HTTP request using get, while the ...

angularhttpauthorizationobservableionic3

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

Creating a system where users can only see their own posts and no one else can access them is my main goal. Authentication along with posting functionality is already in place and working, but I want to implement this without using Firebase restrictions. ...

angulartypescriptfirebase

Leveraging interfaces with the logical OR operator

Imagine a scenario where we have a slider component with an Input that can accept either Products or Teasers. public productsWithTeasers: (Product | Teaser)[]; When attempting to iterate through this array, an error is thrown in VS Code. <div *ngFor= ...

angulartypescriptvisual-studio-codeinterface

The Angular RXJS HTTPClient fails to properly handle HttpErrorResponses

In my Angular 12 project, I am facing an issue with setting up unit tests that should capture errors from HTTP responses. However, when running the tests, instead of receiving the error as an actual error object, it is being passed within the response body ...

angulartypescripterror-handlingrxjsobservable

Modify the default behavior of the TabView component in NativeScript

I am currently developing an NS angular2 application and I have run into an issue with the default behavior of the TabView component. I do not want it to preload all data upon creation of the component. Instead, I only want the data for a specific tab to l ...

javascriptiostypescriptmobilenativescript

Unable to successfully remove item using Asyncstorage

const deleteProduct = prod => { Alert.alert( 'Delete Product', `Are you sure you want to remove ${prod.id}?`, [ { text: 'Cancel', style: 'cancel', }, { ...

typescriptreact-nativereact-hooksasync-awaitasyncstorage

What is the best way to handle and synchronize a dynamic number of actions?

I have developed an application that showcases a table of statistics regarding team members for all teams the current user is part of. The team list api provides an array of team ids when called. The team member list api requires a team id and returns a ...

angularreduxrxjsrxjs6redux-observable

Leveraging Angular to utilize services within objects, or alternatively constructing objects by incorporating services within their

I am currently working with a form setting that looks like this: export const fields = [ { key: 'key', options: myService.get() // how can I call service method here? } ] Recently, I had the thought of structuring it differently b ...

angular

Upon loading a website, the Chrome browser will automatically set the zoom level to 80%

Recently, I've encountered a perplexing issue with Chrome where my website is automatically zoomed out from 100% to 80%. It seems that browsers cache zoom settings based on the domain and apply them when users revisit the site. However, in this case, ...

htmlangulargoogle-chromefirefoxbrowser

Obtain a string of characters from different words

I have been trying to come up with a unique code based on the input provided. Input = "ABC DEF GHI" The generated code would look like, "ADG" (first letter of each word) and if that is taken, then "ABDG" (first two letters o ...

javascriptangulartypescript