Η δομή for στο Angular

Ο βρόχος μέσω των στοιχείων ενός πίνακα μπορεί επίσης να εκτελεστεί χρησιμοποιώντας την κατασκευή @for.

Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι ξανά στον component μας υπάρχει ένας πίνακας:

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

Ας εξετάσουμε τη σύνταξη της κατασκευής:

app/app.component.html@for () {
  ετικέτες
}

Ας ορίσουμε τον πίνακα που θα διασχίσουμε και τη μεταβλητή, στην οποία θα εισέρχονται τα στοιχεία:

app/app.component.html@for (elem of arr) {
  ετικέτες
}

Αυτό, ωστόσο, δεν είναι όλο. Για τη σωστή λειτουργία του Angular, πρέπει να υποδείξουμε μια ειδική εντολή track. Μετά από αυτήν, πρέπει να υποδείξουμε μια μοναδική τιμή για κάθε στοιχείο του πίνακα. Αυτό απαιτείται, ώστε το Angular να μπορεί να λειτουργεί πιο βέλτιστα με το DOM. Ας πάρουμε ως τέτοια μοναδική τιμή τον αριθμό του στοιχείου πίνακα. Για αυτό, πρέπει να υποδείξουμε τη μεταβλητή $index. Λοιπόν, εδώ είναι ο τελικός μας κώδικας:

app/app.component.html@for (elem of arr; track $index) {
  <div>
    {{ elem }}
  </div>
}

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