javascript - 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>

除非聊天室中没有值，否则这将从 View 中删除 div。我们假设这些值将在某个时候可用:)

这样您的应用程序就不会抛出未定义的错误。您将习惯使用这个技巧，因为我们不断处理 Angular 中的异步“问题”，最常见的是 View 在检索数据之前渲染，从而导致应用程序崩溃。

除 *ngIf 之外的其他可能性是使用安全导航运算符，更多信息 here这是另一个有用的东西。这样你就可以使用例如:

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

其中 yourProp 是单个房间的某些属性。