#引っかかった
AngularFireしてて少し詰まったとこをメモします。
下でのhoge
の配列に10個の要素が入っていたとすると、ロード時に"watch"
が10個consoleに吐かれます。
let hoge = $firebaseArray(ref);
hoge.$watch(() => {
console.log("watch");
});
ですので、$loaded
というものを使います。
function loaded() {
hoge.$watch(() => {
console.log("watch");
});
}
let hoge = $firebaseArray(ref);
hoge.$loaded().then(() => {
//init
loaded();
});
これでロード時に一度しか読まれなくなります。consoleに吐かれる"watch"
は1個になります。
ですが、要素が付け加えられた時など、更新時に"watch"
が2回現れます。ここら辺を見るとわかるのですが、$watch
は4つのイベントにフックします。child_added, child_moved, child_removed, or child_changed
。
お気づきかと思いますが、child_changed
とchild_added
が両方発動します。
なので、私は、
function loaded() {
hoge.$watch((event) => {
if( event.event === "child_added"){
console.log("watch");
}
});
}
let hoge = $firebaseArray(ref);
hoge.$loaded().then(() => {
//init
loaded();
});
という形で回避しています。
間違っていたり、もっといい方法があれば教えてください。
以上。