Angular 在HTML页面上显示Firebase数据

我试图使用以下名为

feed.component.html的模板在提要上显示消息



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

错误：管道的InvalidPipeArgument:“[object]”
“异步管道”

我还得到了我的
feed.component.ts
文件，如下所示：

从'@angular/core'导入{Component，OnInit，OnChanges}；
从“../services/chat.service”导入{ChatService}；
从“rxjs/Observable”导入{Observable}；
从“../models/chat message.model”导入{ChatMessage}；
从“angularfire2/数据库”导入{AngularFireList}；
@组成部分({
选择器：“应用程序源”，
templateUrl:“./feed.component.html”，
样式URL:['./feed.component.css']
})
导出类FeedComponent实现OnInit、OnChanges{
饲料：角火工品；
构造函数（私有聊天：聊天服务）{}
恩戈尼尼特（）{
日志（“feed init…”）
this.feed=this.chat.getMessages（）；
}
ngOnChanges（）{
this.feed=this.chat.getMessages（）；
}
}

我还得到了下面的
messages.components.ts
文件：

从'@angular/core'导入{Component，OnInit，Input}；
从“../services/chat.service”导入{ChatService}；
从“rxjs/Observable”导入{Observable}；
从“../models/chat message.model”导入{ChatMessage}；
@组成部分({
选择器：“应用程序消息”，
templateUrl:'./messages.component.html'，
样式URL:['./messages.component.css']
})
导出类消息组件实现OnInit{
@Input（）chatMessage:chatMessage；
用户名：字符串；
userEmail:string；
messageContent：字符串；
时间戳：日期=新日期（）；
构造函数（）{}
ngOnInit（chatMessage=this.chatMessage）{
this.messageContent=chatMessage.message；
this.timeStamp=chatMessage.timeSent；
this.userEmail=chatMessage.email；
this.userName=chatMessage.userName；
}
}

有人能告诉我这里出了什么问题，我能做些什么来修复它吗？
我所做的是在feed.component.ts文件中更改以下代码：

ngOnInit（）{
日志（“feed init…”）
this.feed=this.chat.getMessages（）.valueChanges（）；//添加了'valueChanges'`
}

我相信它会从Firebase数据库中获取对象，然后，*ngFor迭代对象，为每条消息提供
内容
、
用户名
和
时间戳

如果这个答案有问题，请让我知道，因为我对这个问题还是很陌生的

干杯

---更新---

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

服务文件
组件技术
看法
AngularFireList
用于存储引用路径，以便您可以执行
push（）
、
update（）
和
remove（）
。您需要订阅列表以获取值。比如说

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

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

feedRef:AngularFireList；
饲料：可观察；
恩戈尼尼特（）{
this.feedRef=this.db.list（'chats'）；
this.feeds=this.feedRef.valueChanges（）；
}

因为你们正在从聊天室得到你们需要做的推荐信

feeds: Observable<ChatMessage[]>;

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

提要：可观察；
恩戈尼尼特（）{
this.feeds=this.chat.getMessages（）.valueChanges（）；
}
Angularfire2版本？顺便说一句，您可能应该使用
可观察的
而不是
角度火灾列表
。我想它已经被移除了think@Edric我使用的AngularFire2版本是AngularFire2:“^5.0.0-rc.6”。所谓可观察，你是指FirebaseListObservable？不，只是
rxjs
上的
Observable
，我对这个很陌生，你能告诉我怎么做吗@edrict
valueChanges
方法基本上是一种
可观察的
，每当您的数据库被修改/添加/更新/无论您称之为什么，它都会随数据一起发出。顺便说一句，您还可以删除组件文件上的
ngOnChanges
方法。
<div *ngFor="let i of data>
    <p>{{i | async}}</p>
</div>

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