在Angular6中使用Firebase进行取值操作时,有可能会出现被触发多次的情况。这是因为Angular在组件初始化和变化检测过程中,会多次触发Firebase的取值操作。
要解决这个问题,可以使用Angular的take(1)
操作符来限制只取一次值。这样可以确保取值操作只会被触发一次,而不会在组件变化时再次触发。
下面是一个使用take(1)
进行限制的示例代码:
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { take } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
- {{ item }}
`,
})
export class ExampleComponent implements OnInit {
items: any[];
constructor(private db: AngularFireDatabase) {}
ngOnInit() {
this.db.list('items')
.valueChanges()
.pipe(take(1))
.subscribe(items => {
this.items = items;
});
}
}
在上面的代码中,使用了take(1)
操作符来限制只取一次值。这样无论在组件初始化还是变化检测过程中,都只会触发一次Firebase的取值操作。取得的值会赋给items
数组,然后在模板中使用*ngFor
指令进行遍历显示。
这样就能解决Angular6中Firebase取值操作被触发多次的问题。