Angular:根据是否从 Firebase DB 接收到值有条件地呈现
Angular: conditionally render based on whether value was received from Firebase DB
我有一个组件:
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 承诺。
非常感谢您的帮助。
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
的值。
供参考:
我有一个组件:
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 承诺。
非常感谢您的帮助。
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
的值。
供参考: