So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunter

Datensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. Wir werden mit einer CSV -Datei arbeiten, die Mitarbeiterdetails enthält. Der Code wird in TypeScript geschrieben. 

Bevor Sie beginnen, müssen Sie eine neue Winkelumgebung einrichten, einen neuen Arbeitsbereich mit einer ersten Anwendung erstellen und mit dem Servieren beginnen. Eine Schritt-für-Schritt-Anleitung zum Erstellen der Kesselplatte für Ihre Winkel-App finden Sie im offiziellen Tutorial. Erstellen Sie ein einfaches Modell

Erstellen Sie zunächst eine einfache Klasse, um den Mitarbeiter zu modellieren. Dieses Modell wird von den Winkelkomponenten konsumiert.

Das Modell zum Halten der Mitarbeiterdetails ist unten angegeben. Dies ist nur ein Grundmodell mit dem Namen, der E -Mail und der Stadt des Mitarbeiters. 

Root<br>-- src<br>---- app<br>------ app-routing.module.ts<br>------ app.component.css<br>------ app.component.html<br>------ app.component.ts<br>------ app.module.ts<br>---- models<br>---- services<br>------ csv.services.ts<br>---- index.html<br>---- main.ts<br>---- styles.css<br>

2. Erstellen Sie den Service

Winkelanwendungen haben eine modulare Struktur. Dies macht die Anwendung robust und leicht zu warten. Eine der Hauptregeln einer Winkelanwendung ist, dass Komponenten nicht direkt Daten speichern oder abrufen dürfen. Aus diesem Grund müssen Sie

nutzen, um auf Daten zuzugreifen und zu präsentieren. In unserem Anwendungsfall benötigen wir einen Dienst zum Herunterladen und Importieren von CSV -Daten. 

export class User {<br>  name: string;<br>  email: string;<br>  city: string;<br>}<br>

, die den Inhalt einer Datei in Form von a & lt; a & gt;

und Typ

[Akzeptieren] sein (🎜> (Änderung) sein

nennt das $ Ereignis die Eigenschaften mit dem Inhalt der Datei. text () aus der Datei. Denken Sie daran, dass die Methode zum Lesen der Datei asynchron sein sollte, weshalb wir Async verwenden.  Das einfache Code -Code zum Lesen von Text aus einer CSV -Datei ist hier:

nun ist es Zeit, app.module.ts zu erstellen. Hier werden alle Anbieter, Importe, Erklärungen und die Bootstrap -Komponente registriert.  Mit dieser Änderung können Sie den folgenden Bildschirm sehen.

Live -Demo

Das obige ist der detaillierte Inhalt vonSo laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!