Angular error TS2769: No overload matches this call. Overload 1 of 3

Question

I have the following problem when I try to get all data from realtime db in firebase:

When I remove async from the template, the error is gone but no data is retrieved! I don't understand what's the problem exactly!!

This is my code TS

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> | undefined>': source, operator, lift, subscribe, and 2 more.

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

Answer 1

The angular async pipe is meant to be used with Observable variables, your "tuto" variable is not an observable, that is the reason for the error.

The best option to fix it is to make it an observable (without subscribing):

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

Then on the template (the async pipe will do the subscription for you):

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

now as to why the data is not showing:

• first look at your browser's network tab and verify that there is data being retrieved when you call this.menuService.getAll().snapshotChanges()
• add a console.log into your map(changes => call to see that this mapping is doing the right thing

That should get you unstuck.