Direktivet for i Angular

La oss si vi har en array:

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

La oss iterere over denne arrayen med en løkke i mal-filen. For dette formålet er det strukturelle direktivet *ngFor beregnet. Den kan iterere over en array og vise hvert element i en egen tag.

Først må dette direktivet importeres:

app/app.component.tsimport {NgFor} from "@angular/common";

Og legges til i imports-seksjonen i dekoratøren:

app/app.component.ts@Component({
  .....
  imports: [....., NgFor],
  ....
})

Nå kan det brukes. La oss se hvordan det gjøres. La oss si vi har en liste ul:

app/app.component.html<ul>
  
</ul>

La oss gjøre slik at arrayen vår itereres i en løkke og hvert element vises i tags li. Dette gjøres på følgende måte:

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

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}