Javascript JS NG2 Firebase-将foreach值添加到数组并在模板中使用

我想创建一个房间名称数组，并将其提供给模板中的和ngFor。这些值被推送到数组中，但看起来它们仅在foreach中可用。。我还需要在模板中提供它们。。这是我的组件

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {AngularFire, FirebaseListObservable} from 'angularfire2';
import { Fb } from './firebase';
import 'rxjs/add/operator/map'; 

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

export interface ChatThreadOverview {
  roomname: string;
}

export class MessageOverviewPage {

  activeUser: string;
  threads:  FirebaseListObservable<any[]>;
  fb;
  af;
  public chatroom: ChatThreadOverview[] = [];

  constructor( public fire: Fb, af: AngularFire, public navCtrl: NavController, public navParams: NavParams) {
        this.fb         = fire.instance().database();
        this.af = af;
        this.activeUser = this.fire.instance().auth().currentUser.uid;

        this.threads = this.af.database.list('/message/u_'+ this.activeUser, { preserveSnapshot: true });
        this.threads.subscribe(snapshots => {
            snapshots.forEach(snapshot => {
              // console.log(snapshot.key)
              this.chatroom.push({ "roomname": snapshot.val().room });
              console.log( "Chat inside "+ JSON.stringify(this.chatroom ) )
            });
          })
          console.log( "Chat outside "+ JSON.stringify(this.chatroom ) );
  }

  ionViewDidLoad() { }

}

从'@angular/core'导入{Component}；
从“离子角度”导入{NavController，NavParams}；
从“angularfire2”导入{AngularFire，FirebaseListObservable}；
从“./firebase”导入{Fb}；
导入'rxjs/add/operator/map'；
@组成部分({
选择器：“页面消息概述”，
templateUrl:'messageOverview.html'
})
导出接口概述{
房间名称：字符串；
}
导出类消息概述页{
activeUser:string；
线程：FirebaseListObservable；
fb；
心房颤动；
公共聊天室：ChatThreadOverview[]=[]；
构造器（公共火灾：Fb，af:AngularFire，公共navCtrl:NavController，公共navParams:navParams）{
this.fb=fire.instance（）.database（）；
this.af=af；
this.activeUser=this.fire.instance（）.auth（）.currentUser.uid；
this.threads=this.af.database.list（'/message/u_'+this.activeUser，{preservesnashot:true}）；
this.threads.subscribe（快照=>{
snapshots.forEach（snapshot=>{
//console.log（snapshot.key）
this.chatroom.push（{“roomname”：snapshot.val（）.room}）；
log（“内部聊天”+JSON.stringify（this.chatroom））
});
})
log（“Chat out”+JSON.stringify（this.chatwoom））；
}
ionViewDidLoad（）{}
}

---

只是澄清一下，有两个控制台输出，基本上是foreach外部首先激发的输出，数组为空，foreach内部的输出每次都会激发值。。我需要这个值在foreach循环之外可用，这是一个异步调用，所以正如您所注意到的，这些值不是立即可用的，并且是console.log（“Chat outside”+JSON.stringify（this.chatroom））在订阅中的代码之前执行。一种解决方案是将与

聊天室

相关的代码包装在div中，条件是只有在

聊天室

中有值时才显示模板的部分。比如：

<div *ngIf="chatroom">
   <!-- your code here -->
</div>

---

其中，

yourProp

是单个

房间的某些属性

检索数据后，这些值可用。如果您想在视图中使用它，可以将其包装在

中，例如

console.log（“Chat-outside”+JSON.stringify（this.chatroom））

将打印未定义，因为您在

订阅

方法之外打印，并且它是

异步

，但正如@AJT_82所述，在模板中它是可用的，或者在

订阅

方法之内。。。

<div *ngFor="let room of chatroom">
  <p>{{room?.yourProp}}</p>
</div>