How do I get data using firebase with angularfire2 version 5?

Question

I have been following a few guides on the update process from angularfire2 v4 to v5, to no avail. I cannot seem to get the data where it needs to go. I can get the data from firebase and display it in the console, but for some reason I cannot get it to show up in my ngFor loop. There is one way I am able to get it to show up but I also get an error so I am certain it is wrong.

I have also tried setting up my code exactly as it is here and nothing. https://alligator.io/angular/cloud-firestore-angularfire/

The error I get is

error TS2322: Type '{}[]' is not assignable to type 'Chat[]'

Onward to my code.

chat.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Chat } from './../models/chat';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/take';

@Injectable()
export class ChatService {

  constructor(
    private db: AngularFireDatabase
  ) { }

  getAll() {
    return this.db.list('/chats');
  }

chat-list.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from './../../../admin/services/auth.service';
import { Observable } from 'rxjs/Observable';
import { AppUser } from './../../models/app-user';
import { ChatService } from './../../services/chat.service';
import { Chat } from './../../models/chat';
import * as firebase from 'firebase';

@Component({
  selector: 'chat-list',
  templateUrl: './chat-list.component.html',
  styleUrls: ['./chat-list.component.css']
})
export class ChatListComponent implements OnInit {
  appUser: AppUser;
  chats: Chat[] = [];

  constructor(
    private auth: AuthService,
    private chatService: ChatService
  ) {
    auth.appUser$.subscribe(appUser => this.appUser = appUser);

// This is where the error is showing up --------------|__ERROR__|
    chatService.getAll().valueChanges().subscribe(c => this.chats = c);
  }

  async ngOnInit() {
  }
}

chat-list.component.html

<li *ngFor="let c of chats" class="list-group-item">
   {{ c.name }}
</li>

xRuhRohx · Accepted Answer · 2018-03-07 14:41:20Z

1

Try using this.db.list<Chat>('/chats').valueChanges();.

I put return types when i can to help detect errors in compilation, it would help to put a return type in your service.

getAll(): Observable<Chat[]> {
    return this.db.list<Chat>('/chats').valueChanges();
}

edited Mar 7, 2018 at 14:41

xRuhRohx

4221 gold badge7 silver badges32 bronze badges

answered Mar 7, 2018 at 14:24

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

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

2 Comments

xRuhRohx Over a year ago

Type 'AngularFireList<Chat>' is not assignable to type 'Observable<Chat[]>'. Property '_isScalar' is missing in type 'AngularFireList<Chat>'

xRuhRohx Over a year ago

Ok at the end of the return line, I had to add .valueChanges(); That did the trick. Thank you for your help.!

Collectives™ on Stack Overflow

How do I get data using firebase with angularfire2 version 5?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related