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

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

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

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

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

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

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

app/app.component.html<button (click)="add()">
  add
</button>

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

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

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