ในบทนี้เราจะได้เรียนรู้วิธีการใช้ Angular2 เพื่อแสดงข้อมูลและวิธีการใช้คำแนะนำในตัว NgFor และ NgIf ในตัว
ก่อนอื่นตรวจสอบให้แน่ใจว่าคุณมีโปรแกรมตัวอย่าง Angular2 ที่สามารถรันได้ เป็นการดีที่สุดที่จะเป็นโครงการขนาดเล็ก QuickStart ที่เราทำเสร็จในบทก่อนหน้าหรือโครงการขนาดเล็ก QuickStart ที่คุณทำเสร็จตามขั้นตอนเหนือเว็บไซต์ทางการเนื่องจากคำอธิบายของเราขึ้นอยู่กับพื้นฐานนั้น แล้วเริ่มการเดินทางที่มีความสุขต่อไปนี้
เนื่องจากชุดบทความของเราใช้ TypeScript ก่อนที่จะอ่านเนื้อหาต่อไปนี้คุณอาจดูประเภทของ TypeScript หรือ ES6 URL ของพวกเขาคือ TypeScript และ ES6 หากคุณได้เรียนรู้ภาษาที่มุ่งเน้นวัตถุที่คล้ายกันเช่น Java หรือ C ++ มาก่อนมันจะง่ายต่อการเรียนรู้ชั้นเรียนที่นี่ ชั้นเรียนที่นี่โดยทั่วไปคล้ายกับในภาษาเหล่านั้น
ในส่วนก่อนหน้าเราส่งออกคลาสเปล่าใน app.component.ts ดังนั้นเราต้องเริ่มเติมเต็มเพื่อให้เต็ม ก่อนอื่นเราเพิ่มแอตทริบิวต์สามรายการในคลาส AppComponent (ส่วนประกอบ) ชื่ออายุผลไม้; เช่นเดียวกับต่อไปนี้:
Export Class AppComponent {username = 'dreamapple'; อายุ = 22; Fruit = 'Apple'}วิธีการเขียนข้างต้นเป็นเพียงรูปแบบของตัวย่อ แต่วิธีการเขียนที่สมบูรณ์ควรมีดังนี้:
Export Class AppComponent {// username = 'dreamapple'; // อายุ = 22; // fruit = 'Apple' ชื่อผู้ใช้: String; อายุ: จำนวน; ผลไม้: สตริง; Constructor () {this.username = 'dreamapple'; this.age = 22; this.fruit = 'Apple'; -จากนั้นเราต้องแก้ไขเทมเพลตของเราเพราะเราต้องใช้ HTML มากขึ้นในเทมเพลตดังนั้นเราจึงต้องใช้ backticks เพื่อห่อชิ้นส่วน HTML ของเรา ฟังก์ชั่นมัณฑนากรของเรามีดังนี้:
@component ({ตัวเลือก: 'my-app', เทมเพลต: `<p> ชื่อของฉันคือ: {{username}} </p> <p> อายุของฉันคือ: {{อายุ}} </p> <p> ผลไม้โปรดของฉันคือ: {{{fruit}} </p>`}))แน่นอนเรายังสามารถใช้ตัวเลือกการกำหนดค่า templateURL ของวัตถุข้อมูลเมตาในฟังก์ชั่นมัณฑนากรดังแสดงด้านล่าง:
@component ({ตัวเลือก: 'my-app', // เทมเพลต: `// <p> ชื่อของฉันคือ: {{username}} </p> // <p> อายุของฉันคือ: {{age}} </p> // <p> ผลไม้โปรดของฉันคือ: {{} 'แอพ/เทมเพลต/แอพ-template.html'})ในหมู่พวกเขาแอพ/เทมเพลต/แอพ-template.html แสดงไฟล์แอพ-template.html ในโฟลเดอร์เทมเพลตภายใต้ไดเรกทอรีรูทของโปรแกรม (แทนที่จะเป็น Angular2-travel) จากนั้นคัดลอกชิ้นส่วน HTML ที่เราเขียนไว้ก่อนหน้านี้
จากกระบวนการข้างต้นเราจะเห็นว่า Angular2 ยังคงใช้เครื่องมือจัดฟันคู่ที่ใช้โดย Angular1; มันถูกใช้เป็นสัญลักษณ์การแก้ไขซึ่งสัญลักษณ์การแก้ไขปรากฏขึ้นคือข้อมูลที่เราต้องการแสดง ต่อไปเราต้องเรียนรู้ที่จะใช้คำแนะนำในตัว NGFOR นักเรียนที่คุ้นเคยกับ Angular1 ควรเริ่มต้นด้วยคำแนะนำนี้ได้อย่างง่ายดายเพราะ NGFOR และ NG-Repeat นั้นเหมือนกัน มันถูกใช้เพื่อวนวัตถุที่ทำซ้ำซึ่งโดยทั่วไปเป็นอาร์เรย์
ต่อไปเราเพิ่มแอตทริบิวต์อื่น fruitslist ลงใน AppComponent ดังที่แสดงด้านล่าง:
Export Class AppComponent {username = 'dreamapple'; อายุ = 22; fruitsList = ['Apple', 'Orange', 'Pear', 'Banana']; Fruit = this.fruitslist [0]; // ใช้ this.fruitslist [0]}สิ่งที่เราต้องให้ความสนใจคือสถานที่แสดงความคิดเห็น เราต้องใช้สิ่งนี้ fruitslist เพื่ออ้างถึงคุณลักษณะที่เราได้กำหนดไว้ข้างต้น หากใช้ FruitsList Angular จะไม่ทราบว่ามันหมายถึงอะไร
ต่อไปเราจะวนผ่านอาร์เรย์ผลไม้นี้และดูวิธีการแสดงในเทมเพลต
@component ({ตัวเลือก: 'my-app', เทมเพลต: `<p> ชื่อของฉันคือ: {{username}} </p> <p> อายุของฉันคือ: {{อายุ}} </p> <ul> <li *ngfor =" {{ผลไม้}} </p> `})มีหลายสิ่งที่ต้องให้ความสนใจในรหัสข้างต้น ก่อนอื่นเราใช้ *ngfor แทน ngfor * ที่นี่ไม่สามารถลบออกได้; หากถูกลบออกโปรแกรมของเราจะไม่รายงานข้อผิดพลาด แต่เราจะวนรายการรายการแรกของอาร์เรย์เท่านั้น เกี่ยวกับสาเหตุที่คุณต้องเพิ่ม *คุณสามารถดูไวยากรณ์เทมเพลตได้ที่นี่โดยละเอียด แน่นอนเราสามารถเขียนการดำเนินการบางอย่างที่อยู่เบื้องหลังการแสดงออก *ngfor ที่สามารถช่วยเราแสดงแต่ละดัชนีซึ่งอาจเป็นไปตามดังต่อไปนี้:
<li *ngfor = "ให้ผลของ fruitslist; ให้ i = index;"> {{i}}-{{fruit}} </li>
มีบางสิ่งที่ควรทราบในรหัสเทมเพลตข้างต้น ก่อนอื่นคุณต้องรู้ว่า *ngfor ตามด้วยการแสดงออกดังนั้นเราจึงสามารถเขียนนิพจน์ง่ายๆเพื่อช่วยให้เราวนเวียนดีขึ้น นอกจากนี้เรายังใช้คำหลักเพิ่มขอบเขตระดับบล็อกและ จำกัด ตัวแปรเหล่านี้ไว้ในบล็อกลูป *ngfor ตกลงถ้าคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ *ngfor คุณสามารถดู API อย่างเป็นทางการเกี่ยวกับ ngfor
คำแนะนำต่อไปที่จะแนะนำคือ NGIF แน่นอนคำสั่งนี้คล้ายกับคำสั่ง NG-IF ของ Angular1 ตัดสินใจว่าจะเพิ่มหรือลบองค์ประกอบบน DOM ตามค่าของนิพจน์ต่อไปนี้หรือไม่
ดูวิธีที่เราใช้คำสั่งนี้ในเทมเพลต:
<p *ngif = "fruitslist.length> 3"> ความยาวของ Fruitslist นั้นใหญ่กว่า 3 </p>
<p *ngif = "fruitslist.length <= 3"> ความยาวของ Fruitslist ไม่ใหญ่กว่า 3 </p>
ก่อนอื่นเราควรชี้ให้เห็นว่าเช่นการใช้ *ngfor เราใช้ *ngif; จากนั้นเราสามารถเขียนนิพจน์หลังจาก *ngif และผลตอบแทนที่คาดหวังของนิพจน์นี้เป็นค่าบูลีน จากนั้นคำสั่ง *ngif จะตัดสินใจว่าจะเพิ่มหรือลบองค์ประกอบที่ควบคุมบน DOM ตามค่าของนิพจน์นี้
เนื่องจากเราใช้ TypeScript เราสามารถใช้คุณสมบัติใหม่มากมายเช่นการใช้คลาสเพื่อสร้างอินสแตนซ์ ต่อไปเราจะใช้ระดับผลไม้เพื่อสร้างอินสแตนซ์ผลไม้ของเรา ก่อนอื่นเราสร้างโฟลเดอร์ใหม่ภายใต้โฟลเดอร์แอพแล้วเราสร้างไฟล์ Fruit.TS ซึ่งเราเขียนรหัสของคลาสผลไม้:
ส่งออกผลไม้คลาส {constructor (ชื่อสาธารณะ: สตริงราคาสาธารณะ: หมายเลข) {}}มาอธิบายรหัสข้างต้นกันเถอะ เราใช้ตัวสร้างและประกาศคุณสมบัติสองประการของวัตถุนี้ในตัวสร้าง หนึ่งคือชื่อและอื่น ๆ คือราคา เราใช้ชื่อ: สตริงและราคา: พารามิเตอร์หมายเลขในตัวสร้างเพื่อสร้างและเริ่มต้นคุณสมบัติของวัตถุนี้ ต่อไปเราสามารถใช้คลาสนี้ในโปรแกรมของเรา
ก่อนอื่นแนะนำคลาสนี้ใน App.Component.ts:
นำเข้า {ผลไม้} จาก './classes/fruits';
จากนั้นใช้คลาสผลไม้ใน AppComponent เพื่อเริ่มต้นรายการผลไม้ของเรา:
Export Class AppComponent {username = 'dreamapple'; อายุ = 22; fruitslist = [ผลไม้ใหม่ ('แอปเปิ้ล', 20), ผลไม้ใหม่ ('ส้ม', 30), ผลไม้ใหม่ ('ลูกแพร์', 40), ผลไม้ใหม่ ('กล้วย', 50)]; // noinspection typeScriptUnResolvedVariable fruit = this.fruitsList [0] .name; // ใช้ this.fruitslist [0]}จากนั้นเราต้องเปลี่ยนเทมเพลตของเรา:
การคัดลอกรหัสมีดังนี้:
<li *ngfor = "ให้ผลของ fruitslist; ให้ i = index;"> {{i}}-{{fruit.name}}-{{fruit.price}} </li>
ผลลัพธ์สุดท้ายควรมีดังต่อไปนี้:
ในที่สุดฉันต้องบอกว่าทั้ง ES6 และ TypeScript ทำให้ฉันรู้สึกอยากเขียน Java; นี่คือโปรและคอน ข้อได้เปรียบคือการเพิ่มความสามารถในการอ่านรหัสทำให้โปรแกรมง่ายต่อการบำรุงรักษาและเขียนโครงการขนาดใหญ่ที่สะดวกยิ่งขึ้นทำให้การทำงานเป็นทีมสะดวกมาก แน่นอนว่ามีข้อบกพร่องบางอย่างซึ่งส่วนใหญ่จะเพิ่มค่าใช้จ่ายในการเรียนรู้ของทุกคน แน่นอนว่าทุกอย่างรอคอย