EP.3 การ Show data
Service เป็นช่องทางในการแชร์ข้อมูลในคลาส เราสร้าง MessageService และ inject ลงทั้ง 2 ที่
Inject ใน HeroService กับใช้ Service ส่งข้อความ
Inject ใน MessagesComponent กับแสดงข้อความและให้แสดง ID เมื่อผู้ใช้คลิกที่ heroการสร้าง Service สามารถใช้คำสั่งนี้ได้เลย
“ต้องบอกก่อนว่าจะเราทำต่อจากโปรเจคเดิม angular-tour-of -heroes เปิดใช้งานผ่านโปรแกรม Visual Studio Code และเปิด Terminal มาเลยกด command + J”
อย่าลืมคำสั่งรันคือ
……. ng serve ….. น่ะ เมื่อเข้าไปในโฟลเดอร์แล้วสามารถ สั่งรันโปรเจคได้เลย
ng generate service services/hero 
การรับข้อมูล hero
เปิดเข้าไปที่ไฟล์ Service : hero.service.ts เพิ่ม Method
จากนั้นเราจะเอา data hero มาแสดง เราจะ import Hero ที่เป็น interface มาใช้งาน และ import HEROES มาเพื่อเอา data มาแสดง พร้อมกับการสร้าง Method มาตัวหนึ่งชื่อ getHeroes() และส่งค่า HEROES กลับออกไป
จากนั้นเรากลับไปที่ไฟล์ heroes.component.ts ลบ import HEROES ออก แล้ว Import service ที่เราสร้างไว้มาแทน เพื่อที่จะเรียกใช้งาน Service ที่เราสร้างมาใช้เอง พร้อมกับการ Inject heroService
import { Hero } from 'src/app/hero';
import { HeroService } from 'src/app/services/hero.service';
เพิ่ม Method getHeroes()
สร้าง Method มาตัวหนึ่งเพื่อจะดึง heroes จาก service
เรียกใช้งาน method getHeroes() ผ่าน ngOnInit() ดังนี้
จากนั้นเราย้อนกลับไปที่ Browser port : http://localhost:4200/ จะเห็น data ของ heroes ทั้งหมดเช่นเดิม
Observable HeroService
เปิดไปที่ไฟล์ hero.service.ts และ import Observable จาก RxJS และแก้ไข Method getHeros()
import { Observable, of } from 'rxjs';
เมื่อบันทึกแล้วกลับไปดู จะพบว่าไม่มี data มาแสดงเพราะเราได้เป็น Observable
เมื่อเป็นแบบนี้แล้ว เราจะกลับไปไฟล์ heroes.component.ts แก้ไข method getHeroes() โดยการ subscribe เพื่อฟังการเปลี่ยนแปลง เสร็จแล้วย้อนกลับไปดูที่ browser จะพบว่า data ของเรากลับมาแล้ว
ดังนี้
บ๊ายยยย ครั้งต่อไปเราจะต่อจาก เรื่องนี้แหล่ะ ครั้งนี้ขอตัดจบก่อน เดียวยาวเกิน เราจะงงเอง 555+ ……….ที่มา
