在使用AngularFire时,可以通过手动调用detectChanges()
方法来触发变更检测。
下面是一个示例代码:
import { Component, NgZone } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
@Component({
selector: 'app-example',
template: `
{{ item }}
`
})
export class ExampleComponent {
items: any[] = [];
constructor(private afDb: AngularFireDatabase, private ngZone: NgZone) {}
ngOnInit() {
this.afDb.list('items').valueChanges().subscribe((data) => {
this.ngZone.run(() => {
this.items = data;
});
});
}
addItem() {
this.afDb.list('items').push('New Item');
}
}
在上面的代码中,我们使用AngularFireDatabase
来订阅items
节点的更改。在subscribe
回调函数中,我们使用了ngZone.run()
方法来手动触发变更检测,以确保UI能够及时更新。
请注意,ngZone
的引入是必要的,它允许我们在Angular外部进行变更检测。
通过这种方式,我们可以确保当items
节点发生更改时,Angular能够正确地检测到这些变化并更新UI。