Angular တွင် တုံ့ပြန်မှုဆိုင်ရာ ကွင်းဆက်များ

တုံ့ပြန်မှုသည် ngFor ကွင်းဆက်အတွင်း၌လည်း အလုပ်လုပ်ပါမည်။ ဆိုလိုသည်မှာ array တွင်ပြောင်းလဲမှုများရှိပါက၊ ထိုပြောင်းလဲမှုများသည် ချက်ချင်းပင် စခရင်ပေါ်တွင် �ေါ်လာမည်ဖြစ်သည်။

လက်တွေ့စမ်းကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ array ရှိသည်ဟု ဆိုကြပါစို့။

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

ကျွန်ုပ်တို့၏ array ကို စာရင်းတစ်ခုအနေဖြင့် ကွင်းဆက်အတွင်း ထုတ်ပြကြပါစို့။

<ul>
	<li *ngFor="let elem of arr">
		{{ elem }}
	</li>
</ul>

ခလုတ်တစ်ခုလုပ်ပါ၊ ၎င်းကို နှိပ်လိုက်သောအခါ class မှ method တစ်ခုကို ခေါ်ဆောင်သွားမည်ဖြစ်သည်။

<button (click)="add()">
	add
</button>

ဤ method အတွင်းတွင် ကျွန်ုပ်တို့၏ array ကို တစ်နည်းနည်းဖြင့် ပြောင်းလဲပါမည်၊ ဥပမာအားဖြင့်၊ ၎င်းထဲသို့ element အသစ်တစ်ခု ထည့်ပါမည်။

export class AppComponent {
	public text: string = '';
	
	public add(): void {
		this.arr.push('!');
	}
}

ယခု၊ code ကို run ပြီး ခလုတ်ကို နှိပ်လိုက်ပါက၊ နှိပ်လိုက်သည်နှင့် ချက်ချင်းပင် စာရင်းထဲတွင် element အသစ်တစ်ခု ပေါ်လာပါလိမ့်မည်။

Array တစ်ခု ပေးထားသည်။ ၎င်း၏ element များကို ကွင်းဆက်အတွင်း ထုတ်ပြပါ။ ခလုတ်တစ်ခုလုပ်ပါ၊ ၎င်းကို နှိပ်လိုက်သောအခါ array မှ နောက်ဆုံး element ကို ဖျက်သိမ်းသွားမည်ဖြစ်သည်။