引っかかった
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();
});
という形で回避しています。
間違っていたり、もっといい方法があれば教えてください。
以上。