Mifumo ya Mmenyuko katika Angular

Mfumo wa mmenyuko pia utafanya kazi katika kitanzi ngFor. Hii inamaanisha kuwa mabadiliko katika safu, yataonyeshwa mara moja kwenye skrini.

Tujaribu kwa vitendo. Hebu tuseme tuna safu ifuatayo:

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

Tuonyeshe safu yetu kwa kutumia kitanzi kwenye orodha:

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

Tutengeneze kifungo, kubofya ambacho kitaitewa njia ya darasa:

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

Katika njia hii tutabadilisha safu yetu kwa namna fulani, kwa mfano, tuongeze kipengele kipya ndani yake:

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

Sasa, ikiwa utaendesha msimbo na kubonyeza kifungo, basi mara baada ya kubonyeza kwenye orodha kipengele kipya kitatokea.