Dalam bab ini, kita akan belajar cara menggunakan Angular2 untuk menampilkan data, dan cara menggunakan instruksi bawaan NgFor dan NgIf
Pertama, pastikan Anda memiliki program sampel Angular2 yang dapat dijalankan. Yang terbaik adalah proyek kecil QuickStart yang kami selesaikan di bab sebelumnya atau proyek kecil QuickStart yang Anda selesaikan sesuai dengan langkah -langkah di atas situs web resmi, karena penjelasan kami didasarkan pada dasar itu; Lalu mari kita mulai perjalanan bahagia berikut.
Karena serangkaian artikel kami menggunakan TypeScript , sebelum membaca konten berikut, Anda mungkin juga melihat jenis TypeScript atau ES6. URL mereka adalah TypeScript dan ES6. Jika Anda telah mempelajari bahasa yang berorientasi objek yang serupa seperti Java atau C ++ sebelumnya, akan mudah untuk mempelajari kelas-kelas di sini; Kelas -kelas di sini pada dasarnya mirip dengan bahasa dalam bahasa tersebut.
Di bagian sebelumnya, kami mengekspor kelas kosong di app.component.ts , jadi kami harus mulai mengisinya untuk membuatnya penuh. Pertama, kami menambahkan tiga atribut ke kelas AppComponent (komponen), nama, usia, buah; Sama seperti berikut:
Kelas Ekspor AppComponent {username = 'DreamApple'; usia = 22; buah = 'apel'}Metode penulisan di atas sebenarnya hanya bentuk singkatan, tetapi metode penulisan lengkap harus sebagai berikut:
Ekspor kelas appComponent {// username = 'DreamApple'; // usia = 22; // buah = nama pengguna 'apel': string; Usia: Angka; Buah: string; constructor () {this.username = 'dreamApple'; this.age = 22; this.fruit = 'apple'; }}Maka kita harus memodifikasi templat kita, karena kita harus menggunakan lebih banyak HTML di templat, jadi kita harus menggunakan backticks untuk membungkus fragmen HTML kita; Fungsi dekorator kami adalah sebagai berikut:
@Component ({selector: 'my-app', template: `<p> Nama saya: {{username}} </p> <p> Usia saya adalah: {{usia}} </p> <p> Buah favorit saya adalah: {buah}} </p>`})Tentu saja, kita juga dapat menggunakan opsi konfigurasi TemplateUrl dari objek metadata dalam fungsi dekorator, seperti yang ditunjukkan di bawah ini:
@Component ({selector: 'my-app', // template: `// <p> Nama saya adalah: {{username}} </p> // <p> Umur saya adalah: {{usia}} </p> // <p> Buah favorit saya adalah: {{buah}} </p> // <p> Buah favorit saya adalah: {{buah}} </p>/// <p> Buah favorit saya adalah: {{buah}} </p> // 'APP/TEMPLATE/APP-TEMPLATE.html'})Di antara mereka, app/templates/app-template.html mewakili file app-template.html di folder template di bawah direktori root program (bukan angular2-travel), dan kemudian menyalin fragmen html yang kami tulis sebelumnya.
Dari proses di atas, kita dapat melihat bahwa Angular2 masih menggunakan kawat gigi ganda yang digunakan oleh Angular1; Ini digunakan sebagai simbol interpolasi, di mana simbol interpolasi muncul adalah data yang ingin kami tampilkan. Selanjutnya, kita perlu belajar menggunakan instruksi bawaan NGFOR. Siswa yang terbiasa dengan Angular1 harus dengan mudah memulai dengan instruksi ini, karena NGFOR dan NG-RePeat pada dasarnya sama; Ini digunakan untuk mengulang objek iterable, yang umumnya merupakan array.
Selanjutnya, kami menambahkan atribut lain FruitsList ke AppComponent, seperti yang ditunjukkan di bawah ini:
Kelas Ekspor AppComponent {username = 'DreamApple'; usia = 22; fruitslist = ['apel', 'oranye', 'pir', 'pisang']; buah = this.fruitslist [0]; // Gunakan this.fruitslist [0]}Hal yang perlu kita perhatikan adalah tempat yang dikomentari. Kita harus menggunakan ini. Jika FruitsList digunakan, Angular tidak akan tahu apa yang diwakilinya.
Selanjutnya kita akan mengulangi array buah ini dan melihat bagaimana mewakilinya di templat.
@Component ({selector: 'my-app', template: `<p> Nama saya adalah: {{username}} </p> <p> Usia saya adalah: {{usia}} </p> <ul> <li *ngfor =" Let Fruitslist "> {{{li> </ngfor =" Let Fruitslist "> {{{}}} {}} {} {} {} {} {{} {{} {{} {{{{} {{{{{{} {{buah}} </p> `})Ada beberapa hal yang perlu diperhatikan dalam kode di atas. Pertama, kami menggunakan *ngFor bukan NGFOR. * Di sini tidak dapat dihapus; Jika dihapus, maka program kami tidak akan melaporkan kesalahan, tetapi kami hanya mengulang item pertama dari array. Mengenai mengapa Anda perlu menambahkan *, Anda dapat melihat sintaks template di sini secara rinci; Tentu saja, kita dapat menulis beberapa operasi di balik ekspresi *ngFor yang dapat membantu kita menunjukkan setiap indeks, yang bisa seperti berikut:
<li *ngFor = "Let Fruit of FruitsList; biarkan i = index;"> {{i}}-{{buah}} </li>
Ada beberapa hal yang perlu diperhatikan dalam kode template di atas. Pertama -tama, Anda perlu tahu bahwa *ngFor diikuti oleh ekspresi, sehingga kami dapat menulis beberapa ekspresi sederhana untuk membantu kami mengulang lebih baik; Kami juga menggunakan kata kunci LET, tambahkan ruang lingkup level blok, dan batasi variabel-variabel ini ke blok loop *ngFor. Oke, jika Anda ingin tahu lebih banyak tentang *ngFor, Anda dapat melihat API resmi tentang NGFOR.
Instruksi berikutnya yang akan diperkenalkan adalah NGIF. Tentu saja, instruksi ini pada dasarnya mirip dengan instruksi NG-IF Angular1. Putuskan apakah akan menambah atau menghapus elemen pada DOM berdasarkan nilai ekspresi berikut.
Lihat bagaimana kami menggunakan arahan ini di templat:
<p *ngif = "fruitslist.length> 3"> panjang fruitslist lebih besar dari 3 </p>
<p *ngif = "fruitslist.length <= 3"> panjang fruitslist tidak lebih besar dari 3 </p>
Pertama -tama, kita harus menunjukkan bahwa, seperti menggunakan *ngfor, kita menggunakan *ngif; Kemudian kita dapat menulis ekspresi setelah *ngif, dan hasil pengembalian yang diharapkan dari ekspresi ini adalah nilai boolean; Kemudian arahan *NGIF akan memutuskan apakah akan menambah atau menghapus elemen yang dikontrolnya pada DOM berdasarkan nilai ekspresi ini.
Karena kami menggunakan TypeScript, kami dapat menggunakan banyak fitur baru, seperti menggunakan kelas untuk membangun instance; Selanjutnya kita akan menggunakan kelas buah untuk membangun instance buah kita. Pertama, kami membuat folder baru di bawah folder aplikasi, dan kemudian kami membuat file buah.
Ekspor kelas buah {konstruktor (nama publik: string, harga publik: angka) {}}Mari kita jelaskan kode di atas. Kami menggunakan konstruktor dan mendeklarasikan dua sifat objek ini di konstruktor; Salah satunya adalah nama dan yang lainnya adalah harga. Kami menggunakan nama: String, dan harga: Parameter angka dalam konstruktor untuk membuat dan menginisialisasi properti objek ini. Selanjutnya, kami dapat menggunakan kelas ini dalam program kami;
Pertama, perkenalkan kelas ini di app.component.ts:
impor {buah} dari './classes/fruits';
Kemudian gunakan kelas buah di AppComponent untuk menginisialisasi daftar buah kami:
Kelas Ekspor AppComponent {username = 'DreamApple'; usia = 22; fruitslist = [buah baru ('apel', 20), buah baru ('oranye', 30), buah baru ('pir', 40), buah baru ('pisang', 50)]; // noinspection typeScriptUnresolvedVariable Fruit = this.fruitslist [0] .name; // Gunakan this.fruitslist [0]}Maka kita perlu mengubah template kita:
Salinan kode adalah sebagai berikut:
<li *ngFor = "Let Fruit of FruitsList; biarkan i = index;"> {{i}}-{{fruit.name}}-{{fruit.price}} </li>
Hasil akhirnya harus menjadi sebagai berikut:
Akhirnya, saya harus mengatakan bahwa ES6 dan naskah membuat saya merasa ingin menulis Java; Ini juga seorang pro dan penipu. Keuntungannya adalah meningkatkan keterbacaan kode, membuat program lebih mudah dipelihara, dan menulis proyek skala besar lebih nyaman, membuat kerja tim sangat nyaman. Tentu saja, ada beberapa kekurangan, yang terutama meningkatkan biaya belajar semua orang; Tentu saja, semuanya melihat ke depan.