Direktyva for Angular

Tarkime, kad turime masyvą:

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

Perkelkime šį masyvą ciklu šablono faile. Tam skirta direktyva *ngFor. Ji gali pakelti masyvą ir išvesti kiekvieną jo elementą atskiroje žymoje.

Pirmiausia ši direktyva turi būti importuota:

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

Ir pridėkite ją į importų skiltį dekoratoriuje:

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

Dabar galite ja naudotis. Pažiūrėkime, kaip tai daroma. Tarkime, kad turime sąrašą ul:

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

Padarykime taip, kad mūsų masyvas būtų pakeltas cikle ir kiekvienas jo elementas būtų išvestas žymėse li. Tai daroma taip:

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];
}