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

Question

我想创建一个房间名称数组并将其提供给模板中的 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() { }

}

只是为了澄清有 2 个控制台输出，基本上是 foreach 之外的一个首先触发，数组是空的，foreach 中的一个每次都触发值..我需要这个值在 foreach 循环之外可用

Answer 1

这是一个异步调用，因此正如您所注意到的，这些值不会立即可用，并且 console.log( "Chat outside "+ JSON.stringify(this.chatroom ) ); 在订阅内的代码之前执行。一种解决方案是将涉及 chatroom 的代码包装在 div 中，条件是模板部分仅在 chatroom 中有值时显示。所以像这样：

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

这将从视图中删除 div，除非聊天室中没有任何值。我们虽然假设这些值将在某个时间可用:)

这样您的应用就不会抛出未定义的错误。你会习惯使用这个技巧，因为我们经常在 Angular 中处理异步 "issues"，最常见的是在检索数据之前渲染视图，导致应用程序中断。

除 *ngIf 之外的其他可能性是使用安全导航运算符，更多关于 here 这是另一个有用的东西。有了它，您可以使用例如：

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

其中 yourProp 是单个 room 的一些属性。

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

JS NG2 Firebase - Add foreach values to array and use in template

javascript

firebase

firebase-realtime-database

angularfire2

angular