Ionic 4 & Angular 7 สูตรคูณ แบบ Local storage

ทำแอพพลิเคชันสูตรคูณ โดยให้ใส่ตัวเลขแม่สูตรคูณที่ต้องการลงในช่อง ENTER Number จากนั้นกดปุ่ม SHOW จะแสดง สูตรคูณแม่นั้นๆ โดยมีวิธีทำดังนี้

1 start project ด้วยคำสั่ง ionic start multiplication tabs

จะทำการสร้างโปรเจคชื่อ multiplication โดยมี tabs เริ่มต้น 3 tabs

2. แก้ไขหน้าการแสดงผลให้แสดงผล 2 tab คือ calculate และ history

3.ทดสอบการรับค่าจากช่องอินพุต

แก้ไขหน้า html เป็น

และแก้ไขในส่วน page.ts ให้ @ViewChild เพื่อเรียกค่าที่รับจาก html และเพิ่มฟังก์ชัน onclickMul() โดยเมื่อใรชีการกดปุ่มที่เรียกใช้ฟังก์ชันนี้จะให้ส่งค่าที่รับมาออกไปแสดง 

จะได้หน้าการแสดงผลดังนี้

ภาพซ้าย : หน้าเริ่มต้นก่อนการใส่ตัวเลข

ภาพขวา : การแสดงผลเมื่อใส่ตัวเลขและกดปุ่ม SHOW

4.ทำฟังก์ชันการคูณ

เปลี่ยนฟังก์ชัน onclickMul()ให้ทำการคูณค่าและส่งผลลัพธ์กับตัวคูณไปเก็บไว้ใน list 

จากนั้นแก้ไขหน้า html ให้ทำ loop เรียกค่าจาก list ที่เก็บค่าผลลัพธ์ไว้ออกมาแสดงผล

จะได้การแสดงผลดังนี้

4. ทำการเก็บค่าตัวเลขที่ใส่ลงในช่องรับข้อความด้วยการใช้ local storage เก็บค่าไว้

import storage ด้วยคำสั่ง
import { Storage } from '@ionic/storage';

ประกาศใน constructor

constructor(private storage: Storage){}

เพิ่มฟังก์ชัน savemul() ให้ทำการบันทึกข้อมูลลง storage และ showmul() เพื่อแสดงข้อมูลที่เก็บไว้ใน storage

จากนั้นในหน้าแสดงผลให้แสดงค่าตัวเลขที่มีการบันทึกไว้ด้วยจะได้ผลลัพธ์ดังนี้

ภาพซ้าย : ใส่เลข 1 ครั้งแรก เมื่อกด SHOW จะทำการแสดงสูตรคูณและบันทึกเลข 1 ลงในฐานข้อมูลครั้งแรก และเมื่อกด CONUT จะแสดงจำนวนครั้งที่บันทึกลงไปคือ 1 ครั้ง

ภาพกลาง : ใส่เลข 1 ลงไป กด SHOW และกด COUNT เป็นครั้งที่ 6

ภาพขวา : ใส่เลข 6 ลงไป กด SHOW และกด COUNT เป็นครั้งที่ 4