Cara memuat naik dan memuat turun fail CSV dengan sudut

Set data sangat penting dalam membina model API dan pelbagai proses perniagaan. Inilah sebabnya mengimport dan mengeksport CSV adalah fungsi yang sering diperlukan. Kami akan bekerjasama dengan fail CSV yang mengandungi butiran pekerja. Kod akan ditulis dalam TypeScript. 

Sebelum anda memulakan, anda perlu menubuhkan persekitaran sudut baru, membuat ruang kerja baru dengan aplikasi awal, dan mula berkhidmat. Panduan langkah demi langkah untuk membuat boilerplate untuk aplikasi sudut anda boleh didapati dalam tutorial rasmi. Buat model mudah

Pertama, mari buat kelas mudah untuk memodelkan pekerja. Model ini akan dimakan oleh komponen sudut.

Model untuk memegang butiran pekerja diberikan di bawah. Ini hanya model asas dengan nama, e -mel, dan bandar pekerja. 

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. Bina Perkhidmatan

Aplikasi sudut mempunyai struktur modular. Ini menjadikan aplikasi yang kuat dan mudah dijaga. Salah satu peraturan utama mana -mana aplikasi sudut ialah komponen tidak boleh dibenarkan menyimpan atau mengambil data secara langsung. Itulah sebabnya anda perlu menggunakan perkhidmatan

untuk mengakses dan membentangkan data. Dalam kes penggunaan kami, kami memerlukan perkhidmatan untuk memuat turun dan mengimport data CSV. 

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

Apabila perkhidmatan dibuat, ia boleh disuntik ke dalam mana -mana komponen. Sebelum membuat fungsi

yang akan mengambil kandungan fail dalam bentuk A & lt; a & gt;

. Tag input dilengkapi dengan sifat seperti [menerima]

, dan taip

harus

[menerima] harus

(perubahan)

teks () dari fail. Ingat, kaedah untuk membaca fail itu harus tidak segerak, itulah sebabnya kami akan menggunakan async .  Sekeping kod mudah untuk membaca teks dari fail CSV di sini:

Setelah kandungan teks diekstrak dari fail CSV, kita boleh menggunakan perkhidmatan yang ditakrifkan dalam langkah 2.

Mengintegrasikan keseluruhan aplikasi

Sekarang, sudah tiba masanya untuk membina app.module.ts . Di sinilah semua pembekal, import, pengisytiharan, dan komponen bootstrap akan didaftarkan.  Dengan perubahan ini, anda akan dapat melihat skrin berikut. Demo live

 

Atas ialah kandungan terperinci Cara memuat naik dan memuat turun fail CSV dengan sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!