获取数据后在html上显示AngularFireList答案

【问题标题】：Displaying AngularFireList on html after getting data获取数据后在html上显示AngularFireList
【发布时间】：2018-04-03 07:02:24
【问题描述】：

我正在尝试在 html 上显示 AngularFireList。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {AngularFireAuth} from 'angularfire2/auth';
import {AngularFireDatabase,AngularFireList} from 'angularfire2/database';



@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html'
})

export class ProfilePage {
  profileData: AngularFireList<any>


  constructor(private fire:AngularFireAuth,private db :AngularFireDatabase,public navCtrl: NavController) {

    this.fire.authState.subscribe(auth => {
    // subscribe to the observable
    this.profileData = this.db.list<profileData>(`profile/${auth.uid}`).valueChanges().subscribe(p =>{

console.log(p);

    });


  });



  }

}

我可以使用此代码获取数据，但我想我无法使其等于 profileData，因此我无法将其显示在屏幕上。

<ul *ngFor="let profile of profileData | async">
                                      <li> {{ profile.username}}:{{ profile.msgnumber}} </li>
                                    </ul>

【问题讨论】：

您在控制台上看到任何错误吗？
不只是 console.log
你能发布console.log里面的内容吗
db 结构类似于 profile - authid- username,msgnumber... 可能是因为 authid ？
你能把你在console.log中看到的json贴出来

标签： angular firebase ionic-framework angularfire2

【解决方案1】：

无需订阅 valueChanges()。见angularfire2 docs

【讨论】：

【解决方案2】：

你的代码应该是，

this.profileData = this.db.list<profileData>(`profile/${auth.uid}`).valueChanges();

【讨论】：

感谢我更改了它，但我仍然无法在页面上显示（html）
如果您将 profileData 的类型更改为 Observable 而不是 AngularFireList 会有帮助吗？

【解决方案3】：

我遇到了同样的问题，为了以后遇到此类错误的用户的利益，这应该可以工作

this.profileDataRef = this.db.list(`profile/${auth.uid}`);      
    this.profileData = this.profileDataRef.valueChanges();

HTML 模板

<ul *ngFor="let profile of profileData | async">
       <li> {{ profile.username}}:{{ profile.msgnumber}} </li>
    </ul>

【讨论】：