在HTML页面上显示Firebase数据 [英] Display Firebase Data on HTML Page

问题描述

我正在尝试使用以下名为feed.component.html

I'm trying to display messages on a feed using the following template called 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数据库的消息.

I keep getting the following error, and am unable to display the messages I send to the Firebase Database on my html chat page.

错误错误:InvalidPipeArgument:管道的"[对象对象]" "AsyncPipe"

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

我也有以下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;
  }

}

任何人都可以告诉我这里出了什么问题以及我该怎么做才能解决它?

Can anyone please tell me what's wrong here and what I can do to fix it?

推荐答案

我要解决的问题是更改feed.component.ts文件中的以下代码:

What I did to solve the issue I was having was to change the following bit of code in the feed.component.ts file:

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

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

I believe it then gets the object from the Firebase Database, and then *ngFor iterates through the object to give me the content, userNames and timestamps for each message.

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

If there's something wrong with this answer, please let me know as I'm still quite new to this.

干杯.

-更新---

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

Another way I found was to use a service, where I used Subject as an observable to store my response. This made it accessible to all the components, which was easier than worrying about parent-child relationships.

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

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

Component.ts

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

查看

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

这篇关于在HTML页面上显示Firebase数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！