Ionic 4 & Angular 7 CRUD Mobile Apps [continue]

5: View List of Data and Delete

- แก้ไขหน้า Home สำหรับแสดงข้อมูลสินค้าทั้งหมดที่มี โดยแก้ไขที่ไฟล์ home.page.ts โดยการ import module เข้ามาและสร้าง list สำหรับเก็บข้อมูลสินค้าและ sync ไปที่ฟังก์ชัน getProduct() เพื่อเรียกข้อมูลออกมาแสดง
- แก้ไข html ให้แสดงสินค้าทั้งหมดและเมื่อกดที่สินค้าให้เปลี่ยนไปยังหน้าแสดงรายละเอียด ( Details )

6: Display Data Details

- รับ id ของสินค้าเข้ามา และแสดงรายละเอียดข้อมูลตาม id
- เมื่อแสดงรยละเอียดแล้วผู้ใช้สามารถทำการแก้ไข หรือ ลบ สินค้านั้นๆ ได้ โดยการใช้งานฟังก์ชันลบ หรือ ฟังก์ชันแก้ไข

- แก้ไข html ให้แสดงรายละเอียด ปุ่มลบ และปุ่มแก้ไขข้อมูล

7: Edit and Update Data

- แก้ไขในส่วนของ tab edit โดยการใช้ฟังก์ชัน getProduct ในการเรียกข้อมูลสินค้าผ่าน id ของสินค้า และใช้ฟังก์ชัน onForm มาใช้ในการรับข้อมูลที่แก้ไขและเรียกใช้ฟังก์ชัน updateProduct ในการอัพเดทข้อมูลของสินค้าให้เป็นไปตามที่ได้แก้ไข
- แก้ไข html ให้แสดงฟอร์มการแก้ไข และปุ่ม submit

8: Add Data

- เพิ่มการทำงานในส่วนของการเพิ่มข้อมูลสินค้า โดยการใช้ Form รับ input เข้ามาและนำไปใช้ที่ฟังก์ชัน addProduct เพื่อเพิ่มข้อมูลสินค้า
- แก้ไข html ให้แสดงฟอร์มการเพิ่มข้อมูล และปุ่ม submit

9: Run and Test The App

- save and run App ด้วยคำสั่ง ionic serve -l

การแสดงผล

หน้า HOME

หน้า ADD

หน้า EDIT

ปัญหา :

ไม่มีข้อมูลให้นำมาแสดง