Uunganishaji wa Takwimu Mbili-Zote katika Angular

Katika Angular inawezekana kufanya hivi: kadiri maandishi yanavyoingizwa kwenye kiingizio, maandishi hayo yanaingia kiatomati kwenye sifa ya darasa. Hii inaitwa uunganishaji wa takwimu mbili-zote.

Ili uunganishaji kama huo uanze kufanya kazi, kwa mara ya kwanza inahitajiku kuwawezesha. Ili kufanya hivyo, katika faili ya kipengele-changa tunazingatia FormsModule:

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

Kisha tuongeze kwenye sifa imports ya kirekebishi @Component:

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

Baada ya hayo, uunganishaji wa takwimu mbili-zote utawekwa wazi na tutaweza kuitumia. Tuifanye.

Kwa mara ya kwanza, tutangaze sifa ya darasa ambayo tutaiweka chini ya uunganishaji wa pande mbili:

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

Wacha tuwe na div na kiingizio. Wacha kwenye div ionyeshe sifa fulani ya darasa:

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

Wacha tuunganishe sifa yetu text kwa mabadiliko ya kiingizio. Ili kufanya hivyo, kwenye kiingizio inahitajika kuandika dira maalum [(ngModel)], ambayo thamani yake inapaswa kuonyesha sifa ya darasa letu:

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

Sasa, ikiwa utaendesha kanuni na uanza kuingiza maandishi kwenye kiingizio, maandishi hayo yataanza mara moja kuonyeshwa kwenye div.

Kipewa kiingizio na aya. Nambari inaonyeshwa kwenye kiingizio. Fanya hivi, ili kadiri nambari inavyoingizwa kwenye kiingizio, kwenye aya ionyeshe mraba wa nambari hiyo.

Kipewa viingizio viwili na aya. Nambari zinaingizwa kwenye viingizio. Fanya hivi, ili kwenye aya ionyeshe jumla ya nambari zilizoingizwa.