Reaktiewe siklusse in Angular

Reaktiwiteit sal ook werk in 'n ngFor-siklus. Dit beteken dat veranderings aan die skikking onmiddellik op die skerm sal verskyn.

Kom ons probeer dit in die praktyk. Laat ons sê ons het die volgende skikking:

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

Laat ons ons skikking in 'n siklus as 'n lys toon:

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

Kom ons maak 'n knoppie wat, wanneer daarop geklik word, 'n metode in die klas sal aanroep:

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

In hierdie metode sal ons ons skikking op een of ander manier verander, bv., ons voeg 'n nuwe element by:

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

As jy nou die kode uitvoer en op die knoppie druk, sal 'n nuwe element onmiddellik in die lys verskyn.