在 HTML 页面上显示 Firebase 数据答案

【问题标题】：Display Firebase Data on HTML Page在 HTML 页面上显示 Firebase 数据
【发布时间】：2018-03-29 03:57:10
【问题描述】：

我正在尝试使用名为 feed.component.html 的以下模板在提要上显示消息

<div class="feed">
  <div *ngFor="let message of feed | async" class="message">
    <app-messages [chatMessage]="message"></app-messages>
  </div>
</div>

我不断收到以下错误，并且无法在我的 html 聊天页面上显示我发送到 Firebase 数据库的消息。

错误错误: InvalidPipeArgument: '[object Object]' 用于管道 '异步管道'

我的feed.component.ts 文件如下：

import { Component, OnInit, OnChanges } from '@angular/core';
import { ChatService } from '../services/chat.service';
import { Observable } from 'rxjs/observable';
import { ChatMessage } from '../models/chat-message.model';
import { AngularFireList } from 'angularfire2/database';

@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit, OnChanges {
  feed: AngularFireList<ChatMessage[]>;

  constructor(private chat: ChatService) { }

  ngOnInit() {
    console.log("feed init...")
    this.feed = this.chat.getMessages();
  }

  ngOnChanges() {
    this.feed = this.chat.getMessages();
  }

}

下面还有我的messages.components.ts 文件：

import { Component, OnInit, Input } from '@angular/core';
import { ChatService } from '../services/chat.service';
import { Observable } from 'rxjs/observable';
import { ChatMessage } from '../models/chat-message.model';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {

  @Input() chatMessage: ChatMessage;
  userName: string;
  userEmail: string;
  messageContent: string;
  timeStamp: Date = new Date();

  constructor() { }

  ngOnInit(chatMessage = this.chatMessage) {
    this.messageContent = chatMessage.message;
    this.timeStamp = chatMessage.timeSent;
    this.userEmail = chatMessage.email;
    this.userName = chatMessage.userName;
  }

}

谁能告诉我这里出了什么问题以及我可以做些什么来解决它？

【问题讨论】：

Angularfire2 版本？顺便说一句，您可能应该使用Observable 而不是AngularFireList。我认为它已被删除
@Edric 我使用的 AngularFire2 版本是 angularfire2: "^5.0.0-rc.6"。 Observable 是指 FirebaseListObservable？
不，只是rxjs上的Observable
我真的很陌生，你能告诉我怎么做吗？ @埃德里克

标签： angular firebase firebase-realtime-database angularfire2

【解决方案1】：

我为解决我遇到的问题所做的是更改 feed.component.ts 文件中的以下代码：

ngOnInit() {
    console.log("feed init...")
    this.feed = this.chat.getMessages().valueChanges(); // Added `valueChanges`
}

我相信它会从 Firebase 数据库中获取对象，然后 *ngFor 遍历该对象，为每条消息提供 content、userNames 和 timestamps。

如果这个答案有问题，请告诉我，因为我对此还是很陌生。

干杯。

---更新---

我发现的另一种方法是使用服务，在该服务中，我使用 Subject 作为 observable 来存储我的响应。这使得所有组件都可以访问它，这比担心父子关系更容易。

服务文件

const response = Subject();
const response$ = response.asObservable();

async getData() {
   await someApiCall.subscribe((element) => {
     this.response.next(element);
   })
 }

组件.ts

const data = [];
getDataFromService {
    this.data = async() => this.service.getDatata();
}

查看

<div *ngFor="let i of data>
    <p>{{i | async}}</p>
</div>

【讨论】：

valueChanges 方法基本上是一个 Observable，只要你的数据库被修改/添加/更新/无论你怎么称呼它，它都会发出数据。
顺便说一句，你也可以在你的组件文件中删除你的ngOnChanges方法。

【解决方案2】：

AngularFireList是存放引用路径，这样就可以执行push()、update()和remove()。您需要 subscribe 到列表中以获取值。例如

feedRef: AngularFireList<any>;
feeds: Observable<ChatMessage[]>;

ngOnInit() {
    this.feedRef = this.db.list('chats');
    this.feeds = this.feedRef.valueChanges();
}

因为您从聊天服务中获得了您需要做的参考

feeds: Observable<ChatMessage[]>;

ngOnInit() {
    this.feeds = this.chat.getMessages().valueChanges();
}

【讨论】：