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

Енді, егер кодты іске қосып, батырманы бассақ, басу сәтінде тізімде жаңа элемент пайда болады.