Директива for дар Angular

Бигзор мо массиве дошта бошем:

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

Биёед ин массивро бо цикл дар файли template такрор кунем. Барои ин директиваи *ngFor пешбинӣ шудааст. Он метавонад массивро такрор карда ва ҳар элементро дар теги ҷудогона чоп кунад.

Аввалан ин директиваро бояд ворид кард:

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

Ва онро ба бахши воридот дар декоратор илова кунед:

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

Ҳоло аз он метавон истифода бурд. Биёед бубинем, ки ин чӣ тавр анҷом дода мешавад. Бигзор мо феҳристи ul дошта бошем:

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

Биёед тавре созем, ки массиви мо дар цикл такрор шавад ва ҳар як элемент он дар тегҳои li чоп шавад. Ин ба тариқи зерин анҷом дода мешавад:

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