如果在使用 Angular Firebase 时遇到未获取实时结果,控制台显示为 undefined 的问题,可能是由于异步操作或数据加载延迟引起的。以下是一些可能的解决方法和代码示例:
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
@Component({
selector: 'app-example',
template: `
{{ item.name }}
`,
})
export class ExampleComponent implements OnInit {
items$: Observable;
constructor(private db: AngularFireDatabase) {}
ngOnInit() {
this.items$ = this.db.list('items').valueChanges();
}
}
ngIf
确保数据加载完成后再显示相关内容。import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
@Component({
selector: 'app-example',
template: `
{{ item.name }}
`,
})
export class ExampleComponent implements OnInit {
items$: any[];
constructor(private db: AngularFireDatabase) {}
ngOnInit() {
this.db.list('items')
.valueChanges()
.subscribe((items) => {
this.items$ = items;
});
}
}
async
管道确保在数据加载完成前不显示 undefined。import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
@Component({
selector: 'app-example',
template: `
{{ item.name }}
`,
})
export class ExampleComponent implements OnInit {
items$: any;
constructor(private db: AngularFireDatabase) {}
ngOnInit() {
this.items$ = this.db.list('items').valueChanges();
}
}
请注意,这些代码示例假设你已经正确设置了 Angular Firebase 并连接到了正确的数据库。确保你的代码与你的实际情况相匹配。