สวัสดี สวีดัส หลังจากที่หายหน้าหายตากันไปนานแสนนาน (ช่วงงานเยอะ กราบขอภัย _/_ ทุกๆท่าน)
เอาละเพื่อไม่ให้เป็นการเสียนาฬิกา เห๊ย เวล๊าา!!! ฮิฮิ
เอาละเราเข้าเรื่องกันละมา
[(ngModel)] ที่เราใช้เขาอยู่ทุกวี่ทุกวัน และยังทำงานเป็น two-way binding แล้วยังไงต่อนะ มันจะมีประโยชน์อะไรถ้าเราไม่สามารถนำความสามารถนี้ของ ngModel ไปต่อยอดได่
ณ ตอนนี้ วันนี้ เราเลยจะมาแยกชิ้นส่วนของเขากัน ว่าจริงๆแล้ว มันมีความหมายอะไร และทำอะไรได้บ้าง
เพื่อไม่ให้เป็นการพร่ำเพื่อ (อันที่จริงนี้ก็พร่ำเพื่อสุดๆละนะ -__-)
รูปเดิม : [(ngModel)] = ทำงานเป็น two-way (properties+$event)
แยกส่วน : [ngModel] = ทำงานเป็น ตัวแปร properties
แยกส่วน : (ngModelChange) = ทำงานเป็น ตัวแปร $event
จริงๆแล้ว [ngModel] พอเราเขียนแบบนี้ มันก็คือ one-way binding นั้นละครับ แต่ในบทความอันเล็กๆนี้เราจะไม่ขอพูดถึงละกัน (เดี๋ยวไม่จบ ฮ่าๆๆ)
เอาละพอเราแยกมันออกเขียนแบบนี้เเล้ว มันดียังไง ทำไรได้ บอกเลยว่า
- เราสามารถใช้ pipe ที่เราเขียนขึ้นเอง ได้
- เราสามารถแปลงค่า ทุกๆสิ่งอย่างได้
- เราสามารถให้มันแสดงผลตามที่เราต้องการได้
- และอื่นๆอีกมากมาย ดังตัวอย่างเล็กๆน้อยๆ
<input [ngModel]="item.value | useMyPipeToFormatThatValue"
(ngModelChange)="item.value=$event" name="inputField" type="text" />
** หากผิดพลาดประการใด ก็ขออภัยไว้ ณ ที่นี้ด้วยนะครับ
Top comments (2)
"ชำแหละ" Not "ชำแหระ".
I personally suggest that you should write an article in English instead because this website is worldwide. Sometimes, some developers who are not Thai really want to know about your article in the English language
Oh sorry and thanks for comments guys.
I will improve