การผูกข้อมูลสองทางใน Angular

ใน Angular สามารถทำให้ขณะที่ป้อนข้อความในอินพุต ข้อความนั้นจะเข้าไปอยู่ในคุณสมบัติคลาสโดยอัตโนมัติ เรียกสิ่งนี้ว่า การผูกข้อมูลสองทาง

เพื่อให้การผูกดังกล่าวทำงานได้ เริ่มแรกต้องเปิดใช้งานเสียก่อน โดยในไฟล์คอมโพเนนต์ให้ทำการ import FormsModule:

import { FormsModule } from '@angular/forms';

จากนั้นเพิ่มเข้าไปในคุณสมบัติ imports ของ decorator @Component:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

หลังจากนี้ การผูกข้อมูลสองทางจะถูกเปิดใช้งานและเราสามารถใช้งานมันได้ ลองทำดูเลย

เริ่มต้นให้ประกาศคุณสมบัติคลาส ซึ่งเราจะนำไปผูกสองทางในภายหลัง:

export class AppComponent {
	public text: string = '';
}

สมมติว่ามี div และ input หนึ่งอัน ให้แสดงคุณสมบัติคลาสบางส่วนใน div:

<div>
	{{ text }}
</div>
<input>

ลองผูกคุณสมบัติ text ของเราเข้ากับการเปลี่ยนแปลงของอินพุต โดยในอินพุตต้องเขียน directive พิเศษ [(ngModel)] และระบุคุณสมบัติคลาสของเราเป็นค่า:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

ทีนี้ ถ้ารันโค้ดและเริ่มป้อนข้อความในอินพุต ข้อความนั้นจะแสดงใน div ทันที

ให้อินพุตและย่อหน้าอย่างละหนึ่ง อินพุตแสดงตัวเลข จงทำให้ขณะที่ป้อนตัวเลขในอินพุต ในย่อหน้าจะแสดงค่ากำลังสองของตัวเลขนั้น

ให้อินพุตสองอันและย่อหน้าอย่างละหนึ่ง ในอินพุตให้ป้อนตัวเลข จงทำให้ในย่อหน้าแสดงผลรวมของตัวเลขที่ป้อนเข้าไป