Angularдаги реактив цикллар

Реактивлик циклда ngFor да ҳам ишлайди. Бу шунни англатадки, массив ўзгарганда, бу ўзгаришлар darhol экранда кўринади.

Келинг, амалда синаб кўрамиз. Бизда куйидаги массив бор деб фараз қилайлик:

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

Бизнинг массивимизни циклда рўйхат шаклида чиқарайлик:

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

Босилганда синф методи чақириладиган тугма ясайлик:

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

Ушбу методда биз массивимизни ўзгартирамиз, масалан, унга янги элемент қўшамиз:

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

Энди, агар кодни ишга тушириб, тугмани боссак, дарҳол босилгандан сўнг рўйхатда янги элемент пайдо бўлади.