错误:InvalidPipeArgument:invalidPipeArgumentError上的管道“ AsyncPipe”为“ [object Object]”

时间:2019-04-14 11:39:04

标签: javascript angular object asynchronous

尝试从Firebase中获取用户个人资料数据,然后将其显示在主页上时,出现异步错误。我尝试在chat.component.html中删除异步,这消除了错误,但没有显示任何数据。

chat.component.html

<!DOCTYPE html>
<html>
<head>
    <title>Chat App</title>
</head>
<body>
    <h1>Chat App</h1>
<ul>
    <li *ngFor="let message of messages | async">{{message.$value}}</li>
</ul>

<input id="messages" type="text" #message placeholder="Enter your message">

<button (click)="newMessage(message.value)">Send message</button>

</body>
</html>

chat.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  messages: AngularFireList<any[]>;

  constructor(public db: AngularFireDatabase) { 
  }

  ngOnInit() {
    this.getChatData();
  }

  getChatData() {
    this.messages = this.db.list('chat_messages');
  }

  newMessage(message) {
    this.messages.push(message);
  }
}

0 个答案:

没有答案