Javascript 从firebase数据库表检索列表中的数据

我的firebase数据库中有一个配置文件表，如下所示

我试图做的是从这个表中获取每个概要文件实例的特定值，并在UI中列出它们。我发现了另一个堆栈溢出帖子，对他们有效的解决方案是这样的

这是home.ts文件（我将在这里显示所有用户）

从'@angular/core'导入{Component}；
从“离子角度”导入{NavController、ToastController、NavParams}；
从'angularfire2/auth'导入{AngularFireAuth}；
从“angularfire2/database”导入{AngularFireDatabase，AngularFireObject}；
从“../../models/Profile”导入{Profile}；
从“rxjs/Observable”导入{Observable}；
从'@angular/common/http'导入{HttpClient}；
从“firebase”导入firebase；
@组成部分({
选择器：“主页”，
templateUrl:'home.html'
})
导出类主页{
轮廓：可见；
构造函数（公共http:HttpClient，私有toast:ToastController，公共afDatabase:AngularFireDatabase，私有afAuth:AngularFireAuth，公共navCtrl:NavController，公共navParams:navParams）{
让profiles=this.afDatabase.list（'profile'）.valueChanges（）；
}
}

然后在home.html文件中，我尝试这样显示它

<ion-list>
      <ion-item *ngFor="let profile of profiles | async">
        <p>{{profile.bandName}}</p>
        <p>{{profile.bandHandle}}</p>
      </ion-item>
  </ion-list>

{{profile.bandName}

{{profile.bandHandle}}

---

我得到0个错误，但绝对没有填充任何内容。UI上没有显示任何值！关于可能出现的问题，这里有什么想法吗？

没有尝试，但我认为您必须订阅您的列表

尝试：

如果它不起作用，你能在你的ngOnInit（）中这样做吗

---

然后将结果粘贴到此处

您试图将值存储到块范围变量

配置文件

。这种方式在html中无法访问该变量

export class HomePage {
  public prolfies: any;

  constructor(public http: HttpClient, private toast: ToastController, public afDatabase: AngularFireDatabase, private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
    afDatabase.list('profile')
      .valueChanges()
      .subscribe((data) => {
        this.profile = data;
      });
  }
}

---

我尝试了下面的方法，但是我认为这个语法对于Observable是不正确的。我不反对另一种方式，但我得到以下错误“类型{}[]不可分配给可观察对象{}[]”。另外，您的示例是否也应该基于构造函数构建？如果你有一个更多的代码，这将有很大帮助的例子！另外，我从控制台上得到的原始代码是“未定义的”，这似乎不起作用。。得到一堆语法错误。valueChanges（）似乎不允许then（）确定是的，这是我的错，这是一个可观察的。我已经更新了我的答案啊！这确实让我走得更远，但我现在有一个InvalidPipe错误。。看起来我试图从每个配置文件实例中访问的两个值是[Object，Object]很好，享受角度：）非常感谢你的解决方案，我浪费了很多时间挠头：D

let profiles = this.afDatabase.list('profile').valueChanges()
   .subscribe(value => {
      this.profiles = value;
   })

ngOnInit(
   console.log(this.profiles)
)

export class HomePage {
  public prolfies: any;

  constructor(public http: HttpClient, private toast: ToastController, public afDatabase: AngularFireDatabase, private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
    afDatabase.list('profile')
      .valueChanges()
      .subscribe((data) => {
        this.profile = data;
      });
  }
}