Programim dhe zhvillim, javascript, python, php, html

Heqja e një artikulli nga një AngularFirestoreCollection i abonuar me snapshotChanges më pas lundrimi në itinerarin e grumbullimit kthen artikuj të kopjuar

Unë kam një aplikacion shembulli i menaxhimit të listës së vogël i përbërë nga dy komponentë Angular 6 dhe një shërbimi:

ShapeListComponent

Një listë e formave secila me një buton redaktimi që lexohet nga një koleksion Cloud Firestore, i abonuar nëpërmjet thirrjes snapshotChanges() në një thirrje AngularFirestoreCollection dhe mbahet në një rxjs të vëzhgueshme.

ShapeEditComponent

Një faqe redaktimi për secilën formë, e cila lejon që emri të përditësohet ose forma të hiqet nga koleksioni. Pas redaktimit ose heqjes ose përditësimit të formës, përdoruesi lundrohet përsëri në itinerarin e listës së formave.

ShapeService

Përfundon thirrjet në AngularFire.

Problemi

Heqja e një artikulli nuk sillet siç prisja. Kur kthehet përsëri në listë, artikulli i hequr është ende aty, dhe çdo artikull pas artikullit të fshirë në listë dublikohet.

Megjithatë, të dhënat e dokumentit të dukshme në Konsolën e Firebase fshihen saktë dhe nuk shfaqen dublikatë.

A është dikush në gjendje të hedhë dritë nëse qasja ime për të përdorur AngularFire me Cloud Firestore dhe rxjs është e gabuar, apo duhet të funksionojë siç duhet?

Hapat për të riprodhuar

  1. Krijo një projekt të ri Firebase
  2. Konfiguro veçorinë e bazës së të dhënave (përzgjedhja e Cloud Firestore Beta në modalitetin e testimit)

  3. Në cilësimet e projektit tuaj Firebase, zgjidhni "Shto Firebase në aplikacionin tuaj të internetit" dhe kopjoni js që përmban informacionin e lidhjes tuaj (duke shpërfillur rreshtin e fundit që inicializon aplikacionin siç bëhet në deklaratën e modulit më poshtë) në kujtesën e fragmenteve.

    // Initialise Firebase
var config = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "..."
};

  4. Shko te shembulli stackblitz që kam krijuar dhe në app.module.ts zëvendëso të njëjtin fragment , duke e riemërtuar variablin config në firebaseConfig

  5. Shtoni disa forma
  6. Ndryshoni formën e parë në listë dhe shtypni butonin "Hiq".
  7. Lista që rezulton përmban dublikatat e përmendura më sipër.

Shënime të tjera

E njëjta sjellje problematike NUK vërehet kur funksioni i heqjes përfshihet brenda komponentit të listës (dhe nuk kryhet navigimi i routerit). (Shihni këtë shembull që sillet korrekt - gjithashtu duhet të tregojë projektin tuaj Firebase Cloud Firestore)

firebase typescript google-cloud-firestore angular angularfire2
12.06.2018

Përgjigjet:


1

Kam hasur në një çështje të ngjashme të cilën e "zgjidha" duke u mbështetur në operatorin shareReplay(1) në snapshotChanges të vëzhgueshme:

this.shapes$ = this.shapes.snapshotChanges().pipe((shareReplay(1), map(actions => {
  return actions.map(action => ({key: action.payload.doc.id, ...action.payload.doc.data()})));
});

E pranoj se nuk e kam kuptuar pse lind problemi dhe nuk jam i kënaqur me hakimin. Kalimi në valueChanges() (dhe për rrjedhojë humbja e ID-së) gjithashtu i shpëtoi dublikatave.

17.10.2018
Materiale të reja
Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
Faketojeni derisa ta arrini me të dhënat false
A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
Si të përdorni kërkesën API në Python
Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
Një udhëzues hap pas hapi për të zotëruar React
Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
AI dhe Psikologjia — Pjesa 2
Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
Esencialet e punës ditore të kodit tim VS
Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..