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

Реактивдүүлүк цикл ngFor ичинде да иштейт. Бул массив өзгөргөндө, бул өзгөрүүлөр дароо экранга чагылдырыла тургандыгын билдирет.

Келгиле, практикада сынап көрөлү. Бизде төмөнкүдөй массив бар дейли:

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('!');
  }
}

Эми, эгерде кодду иштетип, баскычка бассаңыз, анда басуу менен эле тизмеде жаңы элемент пайда болот.