来自 Realtime Firebase 的数据显示在控制台中，但未显示在 html 页面中

Question

Component.ts

plats 是我的 Firebase 数据库的根节点，我想显示我的根节点的每个子节点 angular page.The 数据显示在控制台中，但不显示在 angular 页面中。谢谢你的帮助 提前。

    itemValue = '';
    name: string;
    plats: Observable<any[]>;
    itemRef: AngularFireObject<any>;

    constructor(public db: AngularFireDatabase) 
    {
    this.itemRef = db.object('plats');
    this.itemRef.snapshotChanges().subscribe(action => {
    const data = action.payload.val();
    console.log(action.payload.val());
    return { ...data };
    });

 }

component.html

    <div class="container">
      <table>
        <tr>
          <th>Community</th>
        </tr>
       <tr *ngFor="let item of plats | async">
          <td>{{item}}</td>  
      </tr> 
     </table>
   </div>

Answer 1

将数据分配给 plats

.ts

const data = action.payload.val();
this.plats = data;

模板：

<tr *ngFor="let item of plats">
  <td>{{item}}</td>  
</tr> 

或

保持 .ts 文件原样，在模板中使用 itemRef

<tr *ngFor="let item of itemRef | async">
   <td>{{item}}</td>  
</tr> 

Answer 2

试试这个：

this.itemRef = db.object('plats');
this.plats = this.itemRef.snapshotChanges().map(items => {
  return items.map(val => {
    const data = val.payload.doc.data();
    const id = val.payload.doc.id;
    return { id, ...data };
});

Answer 3

<tr *ngFor="let item of plats">
  <td>{{item}}</td>  
</tr> 

在此处的代码中，您想要访问关键元素的值。就像{{item.key}}一样访问它。希望这会奏效。