Firebase ist eine Entwicklungsplattform von Google, die schnell und einfach einzurichten ist. In diesem Tutorial werden wir eine Basisanwendung einrichten, die Firebase / Firestore und Angular integriert. Wir werden ein Paket namens AngularFire — die offizielle Angular—Bibliothek für Firebase – sowie das Firebase SDK selbst verwenden.

Die Verwendung von Cloud-Diensten wird immer beliebter, da es Zeit spart, keine eigene Sicherheit, Wartung usw. zu erstellen. Mit Googles Firebase werden wir einen kostenlosen Firestore als Datenbank einrichten.

Firebase bietet auch eine Echtzeitdatenbank, speichert jedoch alles in einem großen JSON-Baum.

Dies sorgt für eine einfachere Datenbank, aber mit dem Cloud Firestore, den wir verwenden werden, gibt es flexible Dokumente, die es für größere Daten besser skalierbar machen. Firestore ist auch schneller und insgesamt intuitiver, wenn Sie mit Datenbanken nicht vertraut sind.

Einrichten der Firebase-Konsole

Sie müssen zunächst Ihr Projekt auf der Firebase-Konsole einrichten. Gehen Sie zuerst hier, um die Konsole zu finden.

Erstellen Sie ein Projekt, geben Sie ihm einen Namen und gehen Sie die Schritte durch. Sobald Sie fertig sind, befinden Sie sich in der Projektübersicht.

Nein, wir müssen eine App hinzufügen. Sie sollten sich auf der Projektübersichtsseite befinden. Hier sehen Sie „Erste Schritte durch Hinzufügen von Firebase zu Ihrer App“.

Klicken Sie dazu auf die Schaltfläche „<>“ (um eine Webanwendung hinzuzufügen). Sie können das Hosting hier einrichten, aber wir werden das in diesem Tutorial nicht behandeln.

Registrieren Sie die App. Auf der nächsten Seite sehen Sie Skripte zum Einrichten des Firebase SDK. Diese sind nützlich, aber wir werden später sehen, wie wir alles bekommen, was wir brauchen, wenn Sie sie auf dieser Seite vermissen. Fahren Sie fort und fahren Sie mit der Konsole fort.

Initialisieren Sie Firestore und erstellen Sie erste Dokumente

In der Firebase-Konsole finden Sie im linken Bereich unter Entwickeln die Registerkarte Datenbank. Klicken Sie darauf und Sie werden zu einer Seite weitergeleitet, auf der Sie auf „Datenbank erstellen“ klicken können. Es erscheint ein Modal, in dem Sie den Produktionsmodus oder den Testmodus auswählen können. Es ist unsicher, aber gut zum Testen.

Wenn Sie fortfahren, werden Sie aufgefordert, einen Speicherort auszuwählen. Gehen Sie voran und wählen Sie die entsprechende. Sobald Sie fertig sind, dauert es einige Minuten, bis der Firestore eingerichtet ist.

Wenn Sie fertig sind, befinden Sie sich in Ihrem Firestore. Gehen Sie weiter und wählen Sie „Sammlung starten“.

Ein Screenshot der Konsole zum Einrichten Ihres Firebase-Projekts.

Ein Screenshot der Konsole zum Einrichten Ihres Firebase-Projekts.

Sie werden aufgefordert, eine Sammlungs-ID zu erstellen. Für unser Beispiel nennen wir es einfach „testCollection“. Klicken Sie auf Weiter und Sie gelangen zum Formular zum Erstellen Ihres ersten Dokuments.

Wir lassen die Dokument—ID leer – Firestore generiert diese automatisch für Sie. Geben Sie unter Feld einfach „Feld“ ein. Dann sehen Sie „string“ als Standardtyp. Es gibt keinen Grund, dies vorerst zu ändern, also lass es einfach so wie es ist. Geben Sie unter Wert „Wert1“ ein. Klicken Sie auf Speichern und Sie werden sehen, dass Sie Ihr erstes Dokument erstellt haben!

Für unser späteres Beispiel erstellen wir ein zweites Dokument. In der mittleren Spalte sehen Sie „+ Dokument hinzufügen.“ klicken Sie darauf und Sie werden zurück zum Formular zur Dokumenterstellung gebracht.

Geben Sie hier einfach „field“ unter Field und „value2“ unter Value ein. Klicken Sie auf Speichern. Jetzt haben wir zwei Dokumente.

Starten Sie ein neues Angular-Projekt

Lassen Sie uns unser Frontend-Projekt mit der Angular CLI (Command Line Interface) erstellen. Öffnen Sie das Terminalfenster und installieren Sie die Angular CLI global:

npm install -g @angular/cli

Wenn dies installiert ist, können Sie den Befehl ng ausführen.

Geben Sie im Terminal Folgendes ein:

ng new your-app-name

Sie können Ihr Projekt beliebig benennen.

Sobald Sie es gestartet haben, führt Sie die Angular CLI durch einige Konfigurationsoptionen.

Sie können Routing hinzufügen und dann auswählen, welches Stylesheet-Format Angular für Ihre Anwendung generieren soll.

Danach wird der Rest durchlaufen und Ihre Angular-App erstellt.

Sobald dies abgeschlossen ist, ändern Sie das Terminalverzeichnis in das gerade erstellte:

cd your-app-name

Im Verzeichnis der Angular-App können Sie ng serve Erstellen und bedienen Sie Ihre App lokal.

Richten Sie Firebase in der Angular-App ein

Lassen Sie uns das Firebase SDK erhalten, indem Sie Folgendes in Ihrem Terminal in Ihrem Angular-Projektverzeichnis ausführen:

npm i --save firebase

Jetzt wird Firebase zu Ihrem Projekt hinzugefügt.

Gehen Sie zur Firebase-Konsole. Im linken Menü sehen Sie „Projektübersicht“ mit einem Zahnradsymbol daneben. Klicken Sie im Popup-Fenster auf das Symbol und dann auf Projekteinstellungen. Gehen Sie hier zur Registerkarte Allgemein und scrollen Sie nach unten.

Klicken Sie unter „Firebase SDK Snippet“ auf das Radio unten neben CDN (standardmäßig automatisch). Hier finden Sie alles, was Sie benötigen, um Ihre App mit Firebase zu verbinden. F

ind die firebaseConfig Variable — wir müssen diese Informationen in die Angular-App kopieren. Sieht so aus (außer dass alles korrekt ausgefüllt wird):

var firebaseConfig = { apiKey: "************************************", authDomain: "*************.firebaseapp.com", databaseURL: "https://************.firebaseio.com", projectId: "***************", storageBucket: "****************.appspot.com", messagingSenderId: "*************", appId: "********************************", measurementId: "****************",};

Navigieren Sie in Ihrer Angular-App zur generierten Datei app.module.ts (wenn Sie Ihr Angular-Projekt über die CLI erstellt haben: src > app > app.module.ts). In diese Datei können Sie die gesamte Variable firebaseConfig einfügen (direkt unter den Importen ist in Ordnung).

Die nächste Aufgabe ist das Herunterladen des npm-Pakets angular/fire. Mit diesem Paket können Sie problemlos mit Firebase interagieren.

Sie können das Paket in Ihrem Projekt mit der folgenden Codezeile installieren:

npm i angular/fire

Wenn dies installiert ist, können wir es hier in der app.module.ts -Datei hinzufügen:

import { AngularFireModule } from @angular/fire';

Initialisieren Sie Firebase jetzt unten im imports-Array in Ihrem app durch Hinzufügen der folgenden Codezeile:

AngularFireModule.initializeApp(firebaseConfig)

Dieser Import ist für Firebase im Allgemeinen, aber wenn wir bestimmte Dienste hinzufügen möchten, müssen Sie diese einzeln hinzufügen.

Fügen Sie für den Firestore Folgendes oben in die Datei ein:

import { AngularFirestoreModule } from '@angular/fire/firestore';

Dann im Array imports ganz unten:

AngularFirestoreModule

In der App implementieren

An dieser Stelle kann es sinnvoll sein, eine oder zwei Komponenten in unserer Angular-Anwendung zu erstellen. Sie können eine neue Komponente in Ihrer Anwendung mithilfe der CLI in Ihrem Projekt erstellen.

Lassen Sie uns eine Home-Komponente erstellen, indem Sie den Befehl im Terminal eingeben:

ng g c home

Das „g c“ steht für „generate component“. Dadurch wird ein Home-Ordner mit vier Dateien generiert: eine HTML-Datei, eine SCSS-Datei (oder ein beliebiges Styling), eine TypeScript-Datei und eine .spec-Datei.

Wenn Sie das Hinzufügen überspringen möchten .spec-Datei, hängen Sie dieses Flag an Ihren generate-Befehl an:

ng g c home --skipTests=true

Wir werden unsere Logik in unserer Home-Komponente ausführen, aber vergessen wir nicht, sie in unserer app.component.html -Datei hinzuzufügen. Sie können dem Router jederzeit eine Home-Komponente hinzufügen, aber der Einfachheit halber fügen wir sie einfach im HTML-Code hinzu.

Wenn Sie wie ich eine Home-Komponente einrichten, lautet der Selektor „app-home“, sodass Sie ihn irgendwo in der app.component.html -Datei wie folgt hinzufügen können

<app-home></app-home>

Danach können wir unsere Operationen in der Home-Komponente ausführen.

Früher haben wir in unserem Firestore eine Sammlung mit dem Namen testCollection ; Darin befinden sich zwei Dokumente oder Objekte. Schauen wir uns zunächst diese beiden Dokumente aus unserem Firestore „an“.

Lesen

In home.component.ts Datei können wir den Firestore über unser Angular/fire—Paket importieren:

import { AngularFirestore } from "@angular/fire/firestore";

Nach dem Import können wir ihn in unserem Konstruktor folgendermaßen initialisieren:

constructor(private firestore: AngularFirestore) {}

Das ist weisen Sie unserem importierten AngularFirestore den Alias von „Firestore“ zu – geben Sie ihm einen beliebigen Namen.

Die ngOnInit -Funktion ist ein perfekter Ort, um direkt aus dem Gitgo aus dem Firestore zu lesen.

Schauen Sie sich diesen Code an:

this.firestore .collection("testCollection") .get() .subscribe((ss) => { ss.docs.forEach((doc) => { this.myArray.push(doc.data()); }); });

Lassen Sie uns dies Schritt für Schritt durchgehen: Wie Sie wahrscheinlich wissen, bezieht sich this.firestore auf den Alias, den wir für unseren AngularFirestore in unserem Konstruktor erstellt haben.

Mit .collection('testCollection') beziehen wir uns auf die zuvor erstellte Sammlung, und mit .get() erhalten wir einfach die gesamte Sammlung (wir werden die Abfrage einzelner Dokumente innerhalb der Sammlung später behandeln).

Wenn wir .subscribe an den Firestore senden, wartet er im Wesentlichen asynchron auf die API, um Daten zurückzugeben. Technisch gesehen stammt subscribe von RxJS und ist ein Observable, das bei Änderungen aktualisiert wird.

Jetzt gibt der Firestore immer Snapshots von Daten zurück, weshalb wir ihm den Alias ss . Unter dem Snapshot unserer Datenbank befinden sich die Dokumente, die die gewünschten Daten sind, und wir können die .forEach Array-Methode verwenden, um das Array von Dokumenten zu durchlaufen.

Im obigen Beispiel haben wir die doc.data() von Firebase Firestore . Dies ist das gesamte Dokument, in unserem Fall ein Objekt mit einer Eigenschaft. Wenn wir es also in unser Array schieben, müssen wir unser Array wie folgt initialisieren:

myArray: any = 

Dies ermöglicht es uns, es in unserem HTML zu sehen, zu löschen, was da ist, und es durch Folgendes zu ersetzen:

<ul> <li *ngFor='let doc of myArray'> {{doc.field}} </li> </ul

Eine vollständige Liste in HTML mit zwei Werten.

Eine vollständige Liste in HTML mit zwei Werten.

Großartig! Wir haben erfolgreich Daten aus unserem Firestore gelesen.

Schreiben

Zuerst fügen wir ReactFormsModule zu app.module.ts , wie folgt:

import { ReactiveFormsModule } from "@Angular/forms";

Fügen Sie außerdem ReactiveFormsModule zum Importarray unten hinzu.

Fügen wir in unserer home.component.html -Datei ein Formular hinzu, um neue Daten zu erfassen und zu senden. Schreiben Sie so etwas:

<form ="this.form"> <input placeholder="New Value" formControlName="newValue" type="text" class="input-field col s12" /> <button (click)="onSubmit()"> Submit </button></form>

Wenn Sie nun den obigen HTML-Code verwendet haben, fügen Sie den folgenden Import zu unserer home.component.ts -Datei hinzu:

import { FormControl, FormGroup } from "@Angular/forms";

Fügen Sie dann in unserer Klasse hinzu:

form = new FormGroup({ newValue: new FormControl('') })`

Dies akzeptiert aus dem HTML, dem Formular und der Eingabe, die wir gemacht haben, mit der formControlName von newValue.

Wir erhalten also die vom Benutzer in den HTML-Code eingegebene Zeichenfolge und senden sie als Wert eines neuen Dokuments in unserem Firestore. Wir können dies tun, indem wir die folgende Funktion verwenden:

onSubmit() { this.firestore.collection('testCollection').add({ field: this.form.value.newValue }) .then(res => { console.log(res); this.form.reset(); }) .catch(e => { console.log(e); }) }

Auf die gleiche Weise, wie wir aus unserem Firestore lesen, werden wir dieses Mal mit derselben Referenz schreiben, um unsere Sammlung zu erhalten:

this.firestore.collection('testCollection')

Dieses Mal werden wir ein Dokument mit .add hinzufügen. Wir möchten das Objekt mit unserem erhaltenen Text hinzufügen:

.add({field: this.form.valule.newValue})

Dies mag seltsam aussehen, liegt aber daran, dass wir den Wert des Formulars erhalten. Dort erhalten wir die Eigenschaft, die wir newValue . Deshalb ist es value.newValue .

Der Rest der Funktion ist einfach ein .then und .catch , um die Antwort vom Firestore zu verarbeiten.

Beim Schreiben in den Firestore ist die Antwort (wenn erfolgreich) ein großes, seltsames Objekt.

Da wir nichts lesen, können diese Handler nur verwendet werden, wenn wir unmittelbar nach dem Schreiben in den Firestore etwas tun möchten (wie beim Aufrufen von .reset() um das Formular zu löschen).

Wenn Sie die App so ausführen, wie sie ist (ng serve ), werden Sie feststellen, dass sie nicht in unserer Liste angezeigt wird, nachdem Sie einen neuen Wert eingegeben und an Firebase gesendet haben. Sie können die Seite aktualisieren und sie sollte angezeigt werden, wenn der Schreibvorgang erfolgreich war. Warum ist das so?

Das liegt daran, dass wir die neue Änderung nicht gelesen haben, nachdem wir an unseren Firestore geschrieben haben. Mit der Art und Weise, wie unsere aktuelle ngOnInit -Funktion eingerichtet ist, beobachten wir keine Änderungen.

Um die neuen Daten zu sehen, müssen wir ändern, wie wir die Daten lesen:

ngOnInit() { this.docs = ; const collectionRef = this.db.collection('testCollection'); const collectionInstance = collectionRef.valueChanges(); collectionInstance.subscribe(ss => this.myArray = ss); }

Jetzt haben wir abonniert. Sie werden sehen, dass nach dem Hinzufügen eines neuen Dokuments zur Datenbank es auch zur Liste in unserer App hinzugefügt wird. Der Hauptunterschied besteht darin, dass wir jetzt .valueChanges() abonniert haben.

Query

Fügen wir ein weiteres Formular hinzu, mit dem wir den Firestore basierend auf dem Wert eines Dokuments abfragen können:

<form ="this.secondForm"> <input placeholder="value1" formControlName="valueToGet" type="text" class="input-field col s12" /> <button (click)="onQuery()"> Query </button></form>

Der Einfachheit halber ist es genau wie das erste Formular, jedoch mit unterschiedlichen Namen und einer anderen Funktion. Gehen Sie voran und nennen Sie es, wie Sie möchten, aber stellen Sie sicher, dass Sie die neuen Namen verwenden und nicht die, die wir im vorherigen Formular verwendet haben.

Stellen Sie in der Typescript-Datei sicher, dass Sie das Formular oben in der Klasse initialisieren:

secondForm = new FormGroup({ valueToGet: new FormControl('') })

Fügen Sie hier oben, wo wir alles initialisieren, single: any; als Variable für unser abgefragtes Dokument und message: string; als Variable für Fehlermeldungen hinzu.

Beginnen wir damit, unsere onQuery -Funktion zu erstellen.

onQuery() { if (!this.secondForm.value.valueToGet) { this.message = 'Cannot be empty'; this.single = null; } else { this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet)).get() .subscribe(ss => { if (ss.docs.length === 0) { this.message = 'Document not found! Try again!'; this.single = null; } else { ss.docs.forEach(doc => { this.message = ''; this.single = doc.data(); }) } }) } }

Zuerst sehen wir, ob der Benutzer überhaupt etwas eingibt. Die Eingabe finden Sie in this.secondForm.value.valueToGet .

Wenn dies leer ist, möchten wir eine Nachricht zurückgeben und keine leere Zeichenfolge an query Firebase senden. Bei dieser „Wenn“ -Prüfung stelle ich auch sicher, dass unsere „einzelne“ Variable leer ist, da wir möglicherweise zuvor erfolgreich abgefragt haben, aber jetzt nur die Nachricht senden möchten, dass das Formular nicht leer sein kann.

Wenn es nicht leer ist, fragen wir unseren Firestore ab. Sie werden etwas Neues im Parameter „collection“ bemerken — in Angular führen wir die Abfrage tatsächlich direkt in diesem Parameter durch. ref ist ein Verweis auf die Sammlung, und .where ist die gebräuchlichste Methode zum Abfragen von Dokumenten in einer Firestore-Sammlung.

In der .where -Methode teilen wir Firebase zunächst mit, welches Feld in jedem Dokument abgefragt werden soll. Alle unsere Felder sind einfach „Feld“, so dass es einfach macht.

Dann verwenden wir einen Komparator, ==, der fragt, ob das Feld isEqual . Sie können auch andere Komparatoren wie <>= und so weiter verwenden.In unserem Fall möchten wir den Eingabewert des Benutzers hier einfügen und prüfen, ob er irgendwo in unserem Firestore als Wert angezeigt wird.

Eine kurze Anmerkung zu einer Firestore-Einschränkung: Die Abfrage mit der .where -Methode ist begrenzt.

Sie können nach etwas suchen, das um einen Buchstaben oder Kleinbuchstaben deaktiviert ist, wo der Firestore es als Großbuchstaben gespeichert hat, und es wird es nicht zurückgeben. Sie können Dinge im Frontend tun, um zu helfen, z. B. dass jede Benutzereingabe in Kleinbuchstaben zum Firestore passt, aber das kann nur so weit gehen.

Natürlich könnten Sie den gesamten Firestore in das Frontend ziehen (wie wir es tun). Abfragen wären zwar besser, aber möglicherweise nicht ideal, wenn Ihr Firestore gigantisch ist. Der vorgeschlagene Weg, um eine Volltextsuche durchzuführen, ist die Verwendung von Algolia.

Wir werden .get() da wir den Wert lesen, und wir werden .subscribe wie beim Lesen der gesamten Sammlung.

Nachdem wir jedoch den Snapshot aus dem Firestore erhalten haben, möchten wir eine „if“ -Prüfung durchführen, um festzustellen, ob etwas zurückgegeben wird. Sie können den Snapshot console.log und prüfen, ob er nicht leer ist, selbst wenn im Firestore keine Übereinstimmung vorhanden war.

Aber die docs Eigenschaft auf dem Snapshot wird leer sein (ein leeres Array, um genau zu sein), wenn es keine Übereinstimmung für unsere Abfrage gibt. Auf diese Weise können wir feststellen, ob unsere Abfrage mit irgendetwas übereinstimmt oder nicht.

Erneut senden wir die Nachricht zurück und setzen die Variable single auf null. Wenn wir eine Übereinstimmung finden, möchten wir das Gegenteil tun, indem wir die Nachricht auf leer setzen und die Variable single auf die zurückgegebenen Daten setzen.

Nun, da wir die Daten haben, gehen wir zurück zu home.component.html. Fügen wir etwas HTML hinzu, um unsere Variablen „message“ und „single“ zu behandeln:

<p style="color: red;">{{message || null}}</p><div *ngIf="single"> <h1>{{single.field}}</h1> <button style="background-color: lightblue">Edit</button> <button style="background-color: red">Delete</button></div>

Ziemlich einfach hier. Wir verwenden die Direktive *ngIf , um das übereinstimmende Dokument nur anzuzeigen, wenn es gefunden wurde. Wie Sie sich erinnern werden, haben wir „single“ auf null gesetzt, wenn es nicht gefunden wurde, sodass das gesamte *ngIfdiv ausgeblendet wäre. Gleiches gilt für die „Nachricht“ — wenn sie auf eine leere Zeichenfolge gesetzt ist.

Sie werden auch feststellen, dass wir Schaltflächen für unseren nächsten Abschnitt hinzugefügt haben, da wir noch in der Lage sein müssen, zu bearbeiten und zu löschen!

Update

Etwas, das uns von nun an sehr helfen wird, ist die id des Dokuments, das wir abgefragt haben.

Wir wissen, dass wir nur das abgefragte Dokument bearbeiten oder löschen werden, also lasst uns seine id . Wie Sie vielleicht bemerken, geben wir ihnen beim Erstellen von Dokumenten aus unserer App keine id .

Wenn wir unsere Dokumente zu Beginn im Firestore erstellt haben, lassen wir den Firestore automatisch die ids generieren. Also, wie bekommen wir die ids?

In unserer onQuery Funktion setzen wir einen Verweis auf unsere Datenbankabfrage wie folgt:

const docRef = this.firestore.collection('testCollection', ref => ref.where("field", "==", this.secondForm.value.valueToGet));

Brechen Sie die .get() und alles danach ab, dann verwenden Sie in einer anderen Zeile unsere Referenz wie folgt:

docRef.get().subscribe(ss => ...)

…Und so weiter. Es ist im Wesentlichen dasselbe.

Nun fügen wir unterhalb der subscribe-Methode eine weitere Zeile hinzu, um das Dokument id zu erhalten:

docRef.snapshotChanges().forEach((changes) => { changes.map((a) => { this.id = a.payload.doc.id; });});

Offensichtlich müssen wir initialisieren this.id oben: id: string = ''. Aber jetzt haben wir die ID, die wir sowohl in unseren Bearbeitungs- als auch in unseren Löschfunktionen verwenden können, die wir erstellen werden.

Ändern Sie in unserer home.component.html -Datei die zuvor erstellte Bearbeitungsschaltfläche wie folgt:

<button style='background-color: lightblue' (click)='openEdit()'>Edit</button>

Mit dieser openEdit() -Funktion können wir in unserer TypeScript-Datei eine Bearbeitungsvariable initialisieren:

edit: boolean = false

Und erstellen Sie die Funktion openEdit, um sie umzuschalten:

openEdit() { this.edit = !this.edit};

Jedes Mal, wenn die Funktion aufgerufen wird, wechselt die Bearbeitungsvariable von false zu true oder von true zu false .

Fügen Sie nun in unserer HTML-Datei das folgende Formular hinzu. Es wird angezeigt, wenn edit wahr ist:

<form *ngIf="edit" ="this.editForm"> <input placeholder="{{single.field}}" formControlName="replaceValue" type="text" class="input-field col s12" /> <button (click)="onRename()"> Rename </button></form><p style="color: red;">{{message2 || null}}</p>

Wieder eine andere Form. Wichtig dabei ist, dass wir nicht das gesamte Dokument überschreiben — wir behalten die id , aber das Feld ändert sich in das, was wir hier eingeben — das ist das Ziel.

Initialisieren Sie in home.component.ts die Variable message2, um eine leere Eingabe zu verarbeiten, und initialisieren Sie das Formular wie bei den anderen. Erstellen Sie dann eine onRename -Funktion.

onRename() { if (!this.editForm.value.replaceValue) { this.message2 = "Cannot Be Empty!"; } else { this.firestore.collection('testCollection').doc(this.id).update({ field: this.editForm.value.replaceValue }); this.edit = false; this.message2 = ''; this.single = null; } }

Hier gibt es ein paar neue Dinge zu beachten.

Zuerst verwenden wir die .doc -Methode und geben die id ein, die wir aus den vorherigen Schritten erhalten haben. Das bekommt das Dokument basierend auf der id , keine Abfrage.

Als nächstes verwenden wir die .update Methode. Dies überschreibt nur die von uns angegebene Eigenschaft anstelle von .set, wodurch das gesamte Dokument überschrieben wird. Mit anderen Worten, wenn wir drei Felder im Dokument hätten, könnten wir nur eines mit der Update-Methode überschreiben.

Wir haben unsere Liste der Dokumente aus dem Firestore erneut gelesen. Dann können wir die einzelne Abfrage, das Bearbeitungsfeld und alle zuvor vorhandenen Nachrichten komprimieren.

Delete

Das Löschen, das wir durchführen, ist im Grunde dasselbe wie unser Update, außer dass wir die delete-Methode verwenden.

Zuerst ändern wir in unserem HTML die Schaltfläche Löschen:

<button style='background-color: red' (click)='delete()'>Delete</button>

Jetzt müssen Sie nur noch die delete -Funktion erstellen.

Es kann sinnvoll sein, eine Warnung einzufügen, bevor der Benutzer das Objekt löschen kann. Fügen Sie der TypeScript-Datei den folgenden Code hinzu:

delete() { if (confirm('Delete?')) { this.db.collection('testCollection').doc(this.id).delete(); this.edit = false; this.single = null; } }

Das confirm('Delete') öffnet eine Warnung, die vor dem Löschen bestätigt werden muss — es erspart dem Benutzer nur, versehentlich etwas unbeabsichtigt zu löschen.

Danach erhalten wir das Dokument einfach mit der id, die wir gespeichert haben, und rufen die delete-Methode auf. So einfach ist das.

Fazit

Sie haben jetzt erfolgreich eine Angular-App erstellt, die Firestore-Dokumente erstellen, lesen, aktualisieren und löschen kann! Wie Sie sehen, ist Firebase Firestore einfach zu bedienen und sofort einsatzbereit. Dies kann leicht auf Tausende komplexer Dokumente hochskaliert werden.

Nachdem Sie nun eine gute Vorstellung von den Firestore-Grundlagen haben, lesen Sie die offiziellen Dokumente für fortgeschrittenere Themen.

Erleben Sie Ihre Angular-Apps genau so, wie es ein Benutzer tut

Das Debuggen von Angular-Anwendungen kann schwierig sein, insbesondere wenn Benutzer Probleme haben, die schwer zu reproduzieren sind. Wenn Sie den Angular-Status und die Aktionen für alle Ihre Benutzer in der Produktion überwachen und verfolgen möchten, versuchen Sie es mit LogRocket. LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket ist wie ein DVR für Web-Apps, der buchstäblich alles aufzeichnet, was auf Ihrer Website passiert, einschließlich Netzwerkanforderungen, JavaScript-Fehlern und vielem mehr. Anstatt zu erraten, warum Probleme auftreten, können Sie aggregieren und darüber berichten, in welchem Status sich Ihre Anwendung befand, als ein Problem auftrat.

Das LogRocket NgRx-Plugin protokolliert den Status und die Aktionen in der LogRocket-Konsole und gibt Ihnen einen Kontext darüber, was zu einem Fehler geführt hat und in welchem Status sich die Anwendung befand, als ein Problem auftrat.

Modernisieren Sie das Debuggen Ihrer Angular-Apps – Starten Sie die kostenlose Überwachung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.