Question

我一直在关注从angularfire2 v4到v5的更新过程的一些指南，但无济于事。我似乎无法获得需要去的数据。我可以从firebase获取数据并将其显示在控制台中，但出于某种原因，我无法让它显示在我的ngFor循环中。有一种方法我可以让它出现，但我也得到一个错误，所以我确定它是错的。

我也尝试过设置我的代码，就像在这里一样，没有任何东西。 https://alligator.io/angular/cloud-firestore-angularfire/

我得到的错误是

错误TS2322：类型'{} []'不能分配给'Chat []'

继续我的代码。

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');
  }

聊天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() {
  }
}

聊天list.component.html

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

Answer 1

尝试使用this.db.list<Chat>('/chats').valueChanges();。

当我可以帮助检测编译中的错误时，我放置了返回类型，这将有助于在您的服务中添加返回类型。

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

如何使用带有angularfire2版本5的firebase获取数据？

1 个答案: