Angular Observable unkown not assignable. using firebase

Question

I am using Angular 8 to make a todo app with a firebase backend.

This is my todo service file which contains the error stating:

Type `Observable unknown[]` is not assignable to type `Observable ITodo[]`.

Type `unknown[]` is not assignable to type `ITodo[]`.

Type `{}` is missing the following properties from type `ITodo`: task, completed

import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { ITodo } from './models/todo';

@Injectable({
  providedIn: 'root'
})
export class TodosService {

  constructor(private db: AngularFireDatabase) { }

  createTodo() {
    return this.db.list('Todos').push({
      task: 'clean',
      completed: 'false'
    });
  }

  getTodo(): Observable<ITodo[]>{
    return this.db.list('Todos').valueChanges();
  }
}

My interface looks like this:

export interface ITodo {
    task:string,
    completed: boolean
}

Does any one have an idea why I am getting that error? Thanks note: the error is on my getTodo method.

Your error says "Type {} is missing the following properties from type ITodo: task, completed". It looks like the items returned by valueChanges() do not hold any data. Have you made sure that the data returned by valueChanges() has the fields "task" and "completed"? — Fabian Schmidt
– Fabian Schmidt, Commented Dec 18, 2019 at 10:33
I assume that the list function is a generic. Perhaps try to do this.db.list<ITodo>('Todos').valueChanges() — Jeffrey Devloo
– Jeffrey Devloo, Commented Dec 18, 2019 at 10:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

This is because you didn't specify a generic for the list method, which optionally accepts a type variable that you can type the result against.

The full definition of AngularFireDatabase#list is as follows:

list<T>(pathOrRef: PathReference, queryFn?: QueryFn): AngularFireList<T>;

And the definition for the AngularFireList interface, which accepts a type variable:

export interface AngularFireList<T> {
  query: DatabaseQuery;
  valueChanges(events?: ChildEvent[]): Observable<T[]>;
  snapshotChanges(events?: ChildEvent[]): Observable<SnapshotAction<T>[]>;
  stateChanges(events?: ChildEvent[]): Observable<SnapshotAction<T>>;
  auditTrail(events?: ChildEvent[]): Observable<SnapshotAction<T>[]>;
  update(item: FirebaseOperation, data: Partial<T>): Promise<void>;
  set(item: FirebaseOperation, data: T): Promise<void>;
  push(data: T): database.ThenableReference;
  remove(item?: FirebaseOperation): Promise<void>;
}

As such, you should add a type variable as follows:

getTodo(): Observable<ITodo[]>{
  return this.db.list<ITodo>('Todos').valueChanges();
}

It's also stated in the "Retrieving data as lists" documentation:

Data is retrieved through the AngularFireDatabase service. The service is also generic. Provide the singular type and not the array type.
const listRef = db.list('items');
const shirtsRef = db.list<Shirt>('shirts');

Collectives™ on Stack Overflow

Angular Observable unkown not assignable. using firebase

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related