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

问题描述

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

的模板在提要上显示消息

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

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

<块引用>

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

我还有我的 feed.component.ts 文件，如下所示:

import { Component, OnInit, OnChanges } from '@angular/core';从 '../services/chat.service' 导入 { ChatService };从 'rxjs/observable' 导入 { Observable };从 '../models/chat-message.model' 导入 { ChatMessage };从 'angularfire2/database' 导入 { AngularFireList };@成分({选择器:'app-feed'，templateUrl: './feed.component.html',styleUrls: ['./feed.component.css']})导出类 FeedComponent 实现 OnInit、OnChanges {提要:AngularFireList;构造函数(私人聊天:ChatService){}ngOnInit() {console.log("饲料初始化...")this.feed = this.chat.getMessages();}ngOnChanges() {this.feed = this.chat.getMessages();}}

我还有我的 messages.components.ts 文件如下:

import { Component, OnInit, Input } from '@angular/core';从 '../services/chat.service' 导入 { ChatService };从 'rxjs/observable' 导入 { Observable };从 '../models/chat-message.model' 导入 { ChatMessage };@成分({选择器:应用消息"，templateUrl: './messages.component.html',styleUrls: ['./messages.component.css']})导出类 MessagesComponent 实现 OnInit {@Input() chatMessage: ChatMessage;用户名:字符串；用户邮箱:字符串；消息内容:字符串；时间戳:日期 = 新日期()；构造函数(){}ngOnInit(chatMessage = this.chatMessage) {this.messageContent = chatMessage.message;this.timeStamp = chatMessage.timeSent;this.userEmail = chatMessage.email;this.userName = chatMessage.userName;}}

谁能告诉我这里出了什么问题，我能做些什么来解决它?

解决方案

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

ngOnInit() {console.log("饲料初始化...")this.feed = this.chat.getMessages().valueChanges();//添加了`valueChanges`}

我相信它然后从 Firebase 数据库中获取对象，然后 *ngFor 遍历对象给我 content、userNames 和 timestamps 用于每条消息.

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

干杯.

---更新---

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

服务文件

const response = Subject();const response$ = response.asObservable();异步获取数据(){等待 someApiCall.subscribe((元素) => {this.response.next(元素);})}

组件.ts

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

查看

<p>{{i |异步}}</p>

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>

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

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

I've also got my feed.component.ts file as follows:

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

}

I've also got my messages.components.ts file below:

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?

解决方案

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`
}

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.

Cheers.

---UPDATE---

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.

Service File

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

View

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

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