Angular：根据是否从 Firebase DB 接收到值有条件地呈现

Question

我有一个组件：

export class MainpageComponent implements OnInit {

  items: Observable<any[]>;
  displayElement = false; //whether we will display the elemet or display a loading thing

  constructor(db: AngularFireDatabase) {
    this.items = db.list('questions').valueChanges();
  }
}

我目前正在 HTML 模板中的滑动器内显示我收到的数据，没有任何问题：

<swiper>
<ng-template swiperSlide *ngFor="let item of items | async">
    <div>
        <h2> {{ item.prop1 }} </h2>
        <h5> {{ item.prop2}} </h5>
    </div>
</ng-template>
</swiper>

但是，我现在只想在 items 加载后才显示上面的部分。并在加载时显示其他内容（加载指示器）。所以我正在计划这样的事情：

<div *ngIf="displayElement; else elseBlock">Items are not here yet</div>
<ng-template #elseBlock>

<!---- old code ------>
<swiper>
<ng-template swiperSlide *ngFor="let item of items | async">
    <div>
        <h2> {{ item.prop1 }} </h2>
        <h5> {{ item.prop2}} </h5>
    </div>
</ng-template>
</swiper>   
<! --------------->

</ng-template>

我唯一的问题是，当从 firebase 数据库加载 items 时，我不知道如何更新 displayElement 变量值（请参阅第一个代码块）。我试过 .then(()={}) 但 valueChanges() 没有 return 承诺。

非常感谢您的帮助。

Answer 1

valueChanges() 是 Observable 类型，Observable 是事件或数据流。要从数据库中获取数据，您需要订阅Observable。因此你必须使用 subscribe() 函数：

db.list('questions').valueChanges().subscribe((res) =>{
    console.log(res);
    this.displayElement = true;
 },error => {
    console.log(error);
 },() => {
    console.log("completed");
});

subscribe 函数需要 3 个回调，第一个回调将在 Observable 发出一个项目时被调用。因此，您可以在从数据库中获取第一项后更改 displayElement 的值。

供参考：

http://reactivex.io/documentation/operators/subscribe.html

Angular：根据是否从 Firebase DB 接收到值有条件地呈现

Angular: conditionally render based on whether value was received from Firebase DB

javascript

angular

firebase

firebase-realtime-database

angularfire