Consuming a REST API using Angular Observable

Question

I recently created a rest API using flask , now when I tried to use it with my Angular web App , I am receiving these errors ( I Tried to follow the same steps mentioned in the official docs : https://angular.io/tutorial/toh-pt6 )

getBills(): void {
          this.BillService.getBills()
             .subscribe(bills => this.billData=bills);
      }
       }

the error is :

ERROR in ../src/app/Bills/add-new-bill.component.ts (61,31): Type '{} | BillModel[]' is not assignable to type 'BillModel[]'. Type '{} | BillModel[]' is not assignable to type 'BillModel[]'. Type '{}' is not assignable to type 'BillModel[]'. Property 'includes' is missing in type '{}'.

this is my bill.service code :

getBills() {
    return this.http.get<BillModel[]>('http://localhost:5000/bills/123')
        .pipe(
            catchError(this.handleError('getBills'))
        );
}

and this is the model Class for my bill object :

export class BillModel {
    Amount: number;
    Bill_id: number;
    CreatedAt: string;
    From: string;
    PaymentDate: string;
    PaymentStatus: boolean;
    To: string;
};

and it works perfectly but I want to work with the observable mechanism so would u please help or explain to me why I am getting that kind of error

Tomasz Kula · Accepted Answer · 2018-04-16 12:31:28Z

2

You need to pass the second argument to the this.handleError method.

getBills() {
    return this.http.get<BillModel[]>('http://localhost:5000/bills/123')
        .pipe(
            catchError(this.handleError('getBills', []))
        );
}

If you do not pass the second argument to the error handler and the http observable throws, your catchError operator will return observable of undefined.

private handleError<T> (operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {
    return of(result as T);
  };
}

So right now the return type of your getBills() method is actually BillModel[] | undefined. And you cannot assign that to the bills property.

edited Apr 16, 2018 at 12:31

answered Apr 16, 2018 at 12:25

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

frod_junior Over a year ago

thanks now it works I still have one problem : I want the getBills method to return an array of Bills but it doesn't in console I receive an undefined

Collectives™ on Stack Overflow

Consuming a REST API using Angular Observable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related