Reaktyvūs ciklai Angular

Reaktyvumas taip pat veiks cikle ngFor. Tai reiškia, kad pakeitus masyvą, šie pakeitimai iškart atsispindės ekrane.

Išbandykime praktiškai. Tarkime, kad turime šį masyvą:

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

Atvaizduokime savo masyvą cikle kaip sąrašą:

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

Sukurkime mygtuką, kurį paspaudus bus iškviečiamas klasės metodas:

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

Šiame metode kaip nors pakeisime savo masyvą, pavyzdžiui, pridėsime į jį naują elementą:

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

Dabar, jei paleisite kodą ir paspausite mygtuką, tuoj po paspaudimo sąraše pasirodys naujas elementas.