Pengikatan Data Dua Hala dalam Angular

Dalam Angular, kita boleh membuat supaya semasa teks dimasukkan ke dalam input, teks tersebut secara automatik masuk ke dalam sifat kelas. Ini dipanggil pengikatan data dua hala.

Untuk pengikatan sedemikian berfungsi, pertama sekali ia perlu dihidupkan. Untuk itu, dalam fail komponen import FormsModule:

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

Kemudian tambahkan dalam sifat imports decorator @Component:

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

Selepas itu, pengikatan data dua hala akan dihidupkan dan kita boleh menggunakannya. Mari kita lakukannya.

Pertama, isytiharkan sifat kelas yang kita kemudian akan lakukan pengikatan dua hala:

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

Katakan kita ada div dan input. Katakan dalam div beberapa sifat kelas dipaparkan:

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

Mari kita ikat sifat text kita kepada perubahan input. Untuk itu, dalam input perlu tulis directive khas [(ngModel)], yang nilainya hendaklah ditentukan sebagai sifat kelas kita:

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

Sekarang, jika kod dilancarkan dan mula memasukkan teks ke dalam input, teks itu akan segera mula dipaparkan dalam div.

Diberi input dan perenggan. Nombor dipaparkan dalam input. Buat supaya semasa nombor dimasukkan ke dalam input, kuasa dua nombor itu dipaparkan dalam perenggan.

Diberi dua input dan perenggan. Nombor dimasukkan ke dalam input. Buat supaya dalam perenggan jumlah nombor yang dimasukkan dipaparkan.