SPA mit ASP.NET Core und Angular

Einträge löschen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Detaileinträge sollen nicht nur bearbeitet, sondern auch gelöscht werden können. Wie Sie das programmieren, zeigt der Trainer in diesem Video.
15:19

Transkript

Nachdem ich in meiner Anwendung bereits die Möglichkeit habe, Daten zu bearbeiten, möchte ich nun auf der Detailseite auch die Möglichkeit hinzufügen, Daten zu löschen. Dazu werde ich zuerst einmal in meinem Service und zwar in meinem clientseitigen Service eine Methode zum Löschen anlegen. Diese nenne ich deleteDish und die erhält eine ID, die ist vom Typ number und die gibt mir ein Promise zurück vom Typ gar nichts, also void. Was ich hier mache ist Folgendes. Ich rufe auf dem HTTP-Service die Methode Delete auf, übergebe jetzt eine URL und das kann ich genauso wie hier oben machen und zwar mit einem Template-String. Bedeutet, der String ist in Backticks oder einfach in Accents eingebunden und dann kann ich variable Bestandteile über ein $ mit geschweiften Klammern angeben. So, hier rufe ich also Delete auf, an dieser URL. Dann überführe ich das Ganze in ein Promise und wenn das Promise zurückgekommen ist, dann gebe ich hier einfach null zurück. So, damit wäre unser Service so weit fertig. Jetzt wechsle ich in den Code meiner Komponente und natürlich brauche ich auch in meiner Komponente eine Methode zum Löschen. Die nenne ich hier einfach delete und ich drücke mal kurz Strg+K+D zum Formatieren. Und diese Methode delete, die hat auch wieder keinen Rückgabewert, stattdessen macht die Folgendes. Die ruft auf meinem VegiService die Methode deleteDish auf, übergibt vom aktuellen Dish die ID und wenn das Ganze erfolgreich war, dann wird einfach zurück navigiert auf die Startseite. So, schauen wir uns das Ganze dann einmal an, nachdem ich den Delete-Button auch in meinem Markup drin hab. Also hier unten button md-button (click)="delete()". Das wird also später genau neben meinem Speichern-Button stehen. Natürlich muss ich hier auch Löschen reinschreiben und jetzt speichere ich das Ganze einmal, wechsel zurück in den Browser, lade meine Anwendung kurz neu. Und was möchten wir löschen? Wir möchten vielleicht nicht mehr anbieten den Reis in der Gemüsepfanne. Also klicke ich hier auf Löschen. Und jetzt scrolle ich herunter zu den Hauptgerichten. Und wenn wir hier mal schauen, den Reis mit Gemüsepfanne, den gibt es nicht mehr. Das Löschen des Datensatzes an sich war also schon relativ simpel, fast schon zu simpel, denn wenn Sie als Benutzer versehentlich auf diesen Button klicke, dann sind die Daten weg. Schön wäre natürlich, wenn ich stattdessen eine Benachrichtigung bekommen würde. Und natürlich können wir auch das vorher einbauen, mit einem kleinen Dialog. Um einen Dialog zu benutzen, muss ich zunächst einmal eine Komponente für diesen Dialog anlegen. Dazu stoppe ich hier mein Visual Studio ganz schnell und werde dann jetzt einmal die Komponente erzeugen und die erzeuge ich hier direkt unterhalb des app-Ordners. Die Komponente, die ich hinzufügen möchte, die nenne ich delete-dialog.component. delete-dialog.component. Und diese Komponente, die erhält natürlich auch eine HTML-Implementierung. Also Neues Element hinzufügen und dann wähle ich hier HTML-Seite aus und als Name gebe ich ein delete-dialog.component.html. So, wie sieht diese Komponente jetzt schlussendlich aus? Das Markup, das lösche ich hier jetzt einmal. Und so ein Dialog, den ich hier erstelle, den werde ich erzeugen mit einer Komponente, die aus Angular Material kommt. Vom Markup her sieht das so aus, dass ich erst einmal eine Überschrift brauche der Ebene 2 und das ist ein dialog-title und Überschrift lautet Eintrag löschen. Anschließend kann ich den Inhalt angeben. Das kommt dann in ein Element md-dialog-content. Und hier stelle ich die Frage Möchten Sie den Eintrag wirklich löschen? So, und jetzt muss der Benutzer ja sagen, ob Ja oder Nein und dafür muss ich ihm Actions angeben. Und diese Actions, die kommen in einen Bereich, der nennt sich md-dialog-action. Und zwar habe ich hier die erste Aktion, das ist ein Button. Und zwar wird dieser Button den Dialog auch schließen, darum kommt hier md-dialog-close noch herein und der erste Eintrag ist Nein. Das ist auch der Standardeintrag, der vorausgewählt ist. Dann hole ich noch so einen Eintrag und hier schreibe ich rein Ja. Die Grundidee ist jetzt bei diesen dialog-close, das ich das an einen Wert binden kann. Und damit kann ich bestimmen, ob true, false oder was auch immer zurück kommt. Also, einmal die Binde-Syntax und dann setze ich das hier auf den Wert true. Wird nix zurückgegeben, dann ist es false, ansonsten ist es true. Meine Komponente, die braucht auch ein bisschen Code. Dieser Code, der besteht hauptsächlich daraus, dass ich verschiedene Imports zunächst einmal habe. Zum einen natürlich Component aus '@angular/core'. Zum anderen benötige ich nun aber auch MdDialogRef aus '@angular/material'. Und das ist für die Rückgaben zuständig, die wir haben. So, jetzt nutze ich ganz normal den @Component-Dekorator und werde jetzt hier einen Selektor gleich angeben und außerdem werde ich auch noch die templateURL natürlich setzen müssen. So. Und den Selektor, den setze ich auf delete-dialog und die templateURL, die setze ich auf ./delete-dialog-component.html. Natürlich muss ich etwas exportieren an dieser Stelle und zwar eine Klasse. Und das ist meine Klasse DeleteDialogComponent. Und innerhalb dieser Klasse benötige ich jetzt einen Konstruktor. Das ergibt sich aus dieser Dialog-Komponente beziehungsweise aus der Dokumentation davon. Und dieser Konstruktor, der hat eine public-Eigenschaft, und zwar eine public-Eigenschaft vom Typ dialogRef und die ist vom Typ MdDialogRef, und zwar für meine eigene Komponente. So, damit ist die Komponente soweit fertig. Ich wechsle jetzt in die app.module, weil ich eine neue Komponente natürlich auch hier erst einmal importieren muss. Also import DeleteDialogComponent from './delete-dialog.component'. Und jetzt gibt es noch eine kleine Besonderheit. Normalerweise haben wir diese Imports hier oben, wahlweise in die declarations oder in dem Bereich imports hereingeschrieben. Dieses Mal sind wir an einer anderen Stelle und zwar müssen wir hier einen neuen Eintrag hinzufügen, nämlich den Eintrag entryComponents. Und hier können wir jetzt unsere DeleteDialogComponent eintragen. Darüber hinaus muss die aber auch noch tatsächlich in den Bereich declarations herein. So, jetzt sind wir soweit, dass wir das Ganze einmal nutzen können. Ich gehe dazu in meine dish.detail-Komponente herein und werde jetzt hier einmal meine DeleteDialog-Komponente importieren. also import DeleteDialogComponent from '../delete-dialog.component'. Und diese Komponente, die kann ich jetzt weiter unten später benutzen. Darüber hinaus muss ich allerdings hingehen und muss noch den MdDialog aus @angular/material importieren. Hier scheint ein Schreibfehler noch zu sein: delete-dialog.component. Da müssen natürlich zwei "../" davor. Und wie gesagt, ich muss hier oben noch etwas importieren. Nämlich, ich muss hier oben noch importieren den MdDialog aus '@angular/material'. Den, wie gesagt, werde ich jetzt injizieren, und zwar in meinem Konstruktor. Breche ich hier mal schnell um, dann ist das ein bisschen aufgeräumter. Und jetzt werde ich hier als viertes injizieren einen dialog vom Typ MdDialog. So, wie nutze ich das Ganze jetzt? Ich gehe dazu in die Methode delete. Und hier sage ich: let dialogRef = this.dialog open, und zwar eine DeleteDialogComponent an diesem DialogRef. Das ist also die Referenz auf meinen Dialog, kann ich dann die Methode afterClosed aufrufen. Und die kann ich subscriben und da bekomme ich ein Result zurück. Das ist in meinem Fall entweder true oder false, weil ich einmal nichts zurückgebe, und das ist dann immer false, und einmal gebe ich halt true zurück. Und dementsprechend sage ich hier: if(result), wenn das also true ist, und true ist es immer, wenn der Benutzer, wir gucken noch mal hier schnell, auf Ja gedrückt hat. Ja, dann kommt hier true zurück. Und nur in dem Fall, da möchte ich hier tatsächlich etwas löschen. So. Hier fehlt noch ein Komma. Dann wechsle ich noch mal schnell in meine dialog-component herein und das muss natürlich auch md-dialog-actions heißen. So. Und jetzt gucken wir uns mal an, was passiert, wenn ich zum Beispiel die Tortilla löschen möchte. Sobald ich darauf klicke, kommt dieser Dialog. Wenn ich Nein wähle, passiert nichts. Und nehmen wir mal irgendetwas anderes, die Zitronenlimonade, die löschen wir jetzt vielleicht mal. Wenn ich auf Ja drücke, dann ist sie gelöscht. Und hier unten fehlt auch die Zitronenlimonade. Gucken wir uns noch einmal ganz kurz gemeinsam die Schritte an, die ich durchgegangen bin. Nachdem die Datensätze also gelöscht werden konnten, habe ich mich dazu entschlossen, einen Bestätigungsdialog einzubauen. Dazu habe ich die Dialog-Komponente von Angular Material genutzt. Die besteht zum einen daraus, dass ich eine eigene Komponente pro Dialog schreiben muss. Diese Komponente, die importiert Component und MdDialogRef, Die erhält ein DialogRef-Objekt im Konstruktor übergeben. Außerdem definiere ich folgende Struktur im Markup. Ich habe erst mal eine Überschrift mit md-dialog-title, dann habe ich ein md-dialog-content. Das war also der Bereich, in dem meine Frage steht: Möchten Sie den Eintrag wirklich löschen? Und dann habe ich die md-dialog-actions und nicht action, wie ich eben geschrieben hatte. Und hier habe ich dann zwei Buttons -- in meinem Fall. Natürlich können Sie auch mehrere Buttons benutzen. Wenn Sie einen Wert zurückgeben möchten, dann binden sie den einfach hier an md-dialog-close. Zu guter Letzt habe ich das Ganze dann noch in meiner app.module registrieren müssen, ehe ich es nutzen konnte. Und zwar dieses Mal nicht nur als declaration, sondern auch als entryComponent. Und die Nutzung an sich, die war dann gar nicht mehr so schwer. Ich habe also md-dialog importiert. Außerdem habe ich in meiner Komponente auch meine DeleteDialog-Komponente importiert. MdDialog habe ich dann auch im Konstruktor injiziert. Und in meiner Methode habe ich dann einfach dialog -- auf MdDialog -- .open aufgerufen, habe meine dialog-Komponente übergeben und habe mir eine Referenz zurückgeben lassen. Und bei der habe ich auf afterClosed subscribed und habe dann das Ergebnis ausgewertet.

SPA mit ASP.NET Core und Angular

Lernen Sie die Bestandteile von modernen Webanwendungen kennen und nutzen.

5 Std. 21 min (36 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:25.09.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!