Πώς να χρησιμοποιήσετε την οδηγία ngFor Angular

Το Angular χρησιμοποιεί οδηγίες για να αποδίδει δυναμικά ορισμένα στοιχεία HTML στον ιστότοπό σας. Μία από τις διαρθρωτικές οδηγίες που μπορείτε να χρησιμοποιήσετε είναι το ngFor.

Η οδηγία ngFor σάς επιτρέπει να επαναλάβετε το ίδιο μπλοκ συγκεκριμένες φορές ή να κάνετε βρόχο μέσω μιας σειράς αντικειμένων για να εμφανίσετε τις λεπτομέρειες τους. Είναι ένα ισχυρό εργαλείο που μπορείτε να χρησιμοποιήσετε ακόμη και για να αποδώσετε αντικείμενα μέσα σε άλλα αντικείμενα.

Έχει επίσης πολλές λειτουργίες που μπορούν να είναι χρήσιμες σε συγκεκριμένα σενάρια. Αυτό περιλαμβάνει την εύρεση του πρώτου και του τελευταίου στοιχείου ή την παράλειψη ορισμένων στοιχείων.

Πώς να χρησιμοποιήσετε το ngFor για βρόχο μέσω στατικών αριθμών

Η οδηγία ngFor βασίζεται στον βρόχο for, ένα από

1. Μπορείτε να δημιουργήσετε μια λίστα μέσα στην ίδια τη δήλωση ngFor. Ο παρακάτω κώδικας θα επαναλάβει μια παράγραφο πέντε φορές, χρησιμοποιώντας τους δείκτες 0 έως 4:

   <div *ngFor='έστω στοιχείο του [0, 1, 2, 3, 4]; ας = ευρετήριο'>
   <Π> Αυτή είναι μια επαναλαμβανόμενη παράγραφος: {{item}} </Π>
   </div>

2. Επειδή η παραπάνω μέθοδος μπορεί να μην είναι κατάλληλη για μεγάλους πίνακες, μπορείτε επίσης να δημιουργήσετε δυναμικά έναν πίνακα στο αρχείο TypeScript:

   εξαγωγή τάξηExampleClassυλοποιείOnInit{
    αριθμοί: Πίνακας<αριθμός> = [];
   κατασκευαστής() {
   // Αυτό θα δημιουργήσει δυναμικά τον ακόλουθο πίνακα:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   Αυτό.αριθμοί = Πίνακας(10).γέμισμα(1).map((x, i)=>i);
    }
   }

3. Στη συνέχεια, μπορείτε να κάνετε βρόχο μέσω του πίνακα αριθμών στο HTML:

   <div *ngFor='ας στοιχείο των αριθμών? ας = ευρετήριο'>
   <Π>Αυτή είναι μια επαναλαμβανόμενη παράγραφος: {{item}}</Π>
   </div>

Πώς να παραλείψετε ή να δώσετε στυλ σε συγκεκριμένους αριθμούς

Μπορείτε να χρησιμοποιήσετε το Περιττός ή ακόμη και ngΓια μεταβλητές για τον προσδιορισμό κάθε δεύτερου αριθμού. Ένα σενάριο όπου αυτό μπορεί να σας φανεί χρήσιμο είναι εάν θέλετε να διαμορφώσετε το στυλ κάθε μονής ή ζυγής γραμμής σε έναν πίνακα χρησιμοποιώντας διαφορετικό χρώμα.

1. Στο αρχείο CSS για ένα στοιχείο, προσθέστε μερικές νέες κλάσεις CSS. Αυτά είναι τα στυλ που θα χρησιμοποιήσετε για ορισμένα στοιχεία σε ζυγούς ή μονούς δείκτες:

   .το κόκκινο {
    χρώμα: κόκκινο;
   }
   .μπλε { 
    χρώμα: μπλε; 
   }
   

2. Δηλώστε περιττές και ζυγές μεταβλητές στην πρόταση ngFor. Αυτές είναι μεταβλητές που θα αναγνωρίσει το Angular. Αντιστοιχίστε την κόκκινη κλάση CSS σε ζυγούς αριθμούς και την μπλε κλάση CSS σε περιττούς αριθμούς:

   <div *ngFor='ας στοιχείο των αριθμών? ας μονός = περιττός; ας ακόμη = άρτιος' [ngClass]="{κόκκινο: ζυγό, μπλε: περιττό}">
   <Π> Αυτή είναι μια επαναλαμβανόμενη παράγραφος: {{item}} </Π>
   </div>

3. Εκτελέστε τον ιστότοπό σας Angular χρησιμοποιώντας ng σερβίρετε και ανοίξτε το στο πρόγραμμα περιήγησης ιστού. Ζυγά και περιττά στοιχεία HTML θα εναλλάσσονται μεταξύ των διαφορετικών στυλ με βάση την κλάση CSS τους:
4. Εάν θέλετε να παραλείψετε εντελώς κάθε ζυγό αριθμό, μπορείτε να χρησιμοποιήσετε την οδηγία ngIf. Αυτό θα παρακάμψει όλους τους περιττούς αριθμούς και θα εμφανίσει μόνο τους αριθμούς που είναι ζυγοί:

   <div *ngFor='ας στοιχείο των αριθμών? ας ακόμη = άρτιος'>
   <p *ngIf='ακόμη και'> Αυτή είναι μια επαναλαμβανόμενη παράγραφος: {{item}} </Π>
   </div>

Πώς να μετράτε αντίστροφα

Για να μετρήσετε αντίστροφα, μπορείτε να χρησιμοποιήσετε παραδοσιακές μεθόδους, όπως η αντιστροφή μιας λίστας ή η αντίστροφη μέτρηση μέσω του βρόχου χρησιμοποιώντας ένα ευρετήριο.

1. Δηλώστε μια μεταβλητή ευρετηρίου στη δήλωση ngFor. Μέσα στο ngFor, ξεκινήστε από το μήκος του πίνακα και αφαιρέστε τον αριθμό των στοιχείων που έχετε ήδη κάνει loop:

   <div *ngFor="ας στοιχείο των αριθμών? έστω i = ευρετήριο;">
   <Π> Αυτή είναι μια επαναλαμβανόμενη παράγραφος: {{numbers.length-i-1}} </Π>
   </div>

2. Μπορείτε επίσης να δημιουργήσετε μια αντίστροφη λίστα στο αρχείο TypeScript:

   εξαγωγή τάξηExampleClassυλοποιείOnInit{
    αριθμοί: Πίνακας<αριθμός> = [];
    reversedList: Πίνακας<αριθμός> = [];
   κατασκευαστής() {
   Αυτό.αριθμοί = Πίνακας(10).γέμισμα(1).map((x, i)=>i);
   Αυτό.reversedList = Αυτό.numbers.slice().reverse();
    }
   }

3. Επαναλάβετε την αντίστροφη λίστα χρησιμοποιώντας το ngFor:

   <div *ngFor='ας το στοιχείο του reversedList? ας = ευρετήριο'>
   <Π> Αυτή είναι μια επαναλαμβανόμενη παράγραφος: {{item}} </Π>
   </div>

Πώς να δώσετε στυλ στο πρώτο και το τελευταίο στοιχείο με διαφορετικό τρόπο

Μπορείτε να διαμορφώσετε το πρώτο και το τελευταίο στοιχείο ξεχωριστά από τα άλλα στοιχεία χρησιμοποιώντας το πρώτα και τελευταίος Γωνιακές μεταβλητές. Αυτή είναι μια εναλλακτική λύση χρησιμοποιώντας ψευδο-τάξεις CSS σαν :πρώτο παιδί.

1. Στην πρόταση ngFor, δηλώστε την πρώτη και την τελευταία μεταβλητή. Χρησιμοποιήστε την οδηγία ngClass για να αντιστοιχίσετε τις μπλε και κόκκινες κλάσεις CSS στα προηγούμενα βήματα. Αντιστοιχίστε την μπλε κλάση CSS στο πρώτο στοιχείο και την κόκκινη κλάση CSS στο τελευταίο στοιχείο:

   <div *ngFor='ας στοιχείο των αριθμών? ας πρώτος = πρώτος; ας διαρκέσει = διαρκέσει' [ngClass]= "{μπλε: πρώτο, κόκκινο: τελευταίο}">
   <Π> Αυτή είναι μια επαναλαμβανόμενη παράγραφος: {{item}} </Π>
   </div>

Πώς να χρησιμοποιήσετε ένα ngFor για επανάληψη σε αντικείμενα

Μπορείτε να χρησιμοποιήσετε την οδηγία ngFor για να κάνετε βρόχο μέσα από αντικείμενα και να αποκτήσετε πρόσβαση στις μεμονωμένες μεταβλητές τους.

1. Δημιουργήστε μια λίστα αντικειμένων στο αρχείο TypeScript. Σε αυτήν την περίπτωση, θα υπάρχει μια λίστα ατόμων με τα στοιχεία τους:

   εξαγωγή τάξηExampleClassυλοποιείOnInit{
    άνθρωποι = []; 
   κατασκευαστής() {
   Αυτό.άνθρωποι = [
    { όνομα: 'Γιάννης', επίθετο: 'Σιδηρουργός', επάγγελμα: 'Διευθυντής ανθρωπίνου δυναμικού', Ημερομηνία έναρξης: νέα Ημερομηνία("2019-02-05") },
    { όνομα: 'Μαρία', επίθετο: 'Τζόνσον', επάγγελμα: 'Τεχνικός Υπεύθυνος', Ημερομηνία έναρξης: νέα Ημερομηνία("2016-01-07") },
    { όνομα: 'Γουλιέλμος', επίθετο: 'καφέ', επάγγελμα: 'Υπάλληλος Ανθρώπινου Δυναμικού', Ημερομηνία έναρξης: νέα Ημερομηνία("2018-03-03") },
    ];
    }
   }

2. Στο HTML, χρησιμοποιήστε τον βρόχο ngFor για να κάνετε βρόχο στη λίστα των ατόμων. Κάθε άτομο θα είναι προσβάσιμο χρησιμοποιώντας το πρόσωπο μεταβλητός. Μπορείτε να χρησιμοποιήσετε τη μεταβλητή άτομο για να αποκτήσετε πρόσβαση στα χαρακτηριστικά κάθε ατόμου:

   <div *ngFor='ας πρόσωπο των ανθρώπων? ας = ευρετήριο'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <Π> {{person.occupation}} </Π>
   <Π> {{person.startDate}} </Π>
   </div>

Πώς να χρησιμοποιήσετε ένα ένθετο ngFor για την εμφάνιση αντικειμένων μέσα σε άλλα αντικείμενα

Μπορείτε να χρησιμοποιήσετε έναν ένθετο βρόχο για να εμφανίσετε αντικείμενα μέσα σε άλλα αντικείμενα.

1. Τροποποιήστε τη λίστα των ατόμων. Κάθε άτομο θα έχει μια λίστα επαφών έκτακτης ανάγκης. Αποθηκεύστε κάθε επαφή έκτακτης ανάγκης ως ξεχωριστό αντικείμενο:

   Αυτό.άνθρωποι = [
    {
    όνομα: 'Γιάννης',
    επίθετο: 'Σιδηρουργός',
    Επαφές έκτακτης ανάγκης: [
    { όνομα: 'Αμάντα Σμιθ', σχέση: 'Γυναίκα', τηλέφωνο: '0441239876' },
    { όνομα: 'Μπάρι Σμιθ', σχέση: 'Υιός', τηλέφωνο: '0442239876'}
    ]
    },
    {
    όνομα: 'Μαρία',
    επίθετο: 'Τζόνσον',
    Επαφές έκτακτης ανάγκης: [
    { όνομα: 'Μαρκ Τζόνσον', σχέση: 'Σύζυγος', τηλέφωνο: '0443239876' }
    ]
    },
    ];

2. Στο HTML, δημιουργήστε έναν ένθετο βρόχο μέσα στον αρχικό σας βρόχο για να περιηγηθείτε σε κάθε επαφή έκτακτης ανάγκης και εμφανίστε τα στοιχεία τους:

   <div *ngFor='ας πρόσωπο των ανθρώπων? ας = ευρετήριο'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='επιτρέψτε την επαφή του προσώπου.emergencyΕπαφές; έστω j = δείκτης'>
   <h5> Επαφές έκτακτης ανάγκης: </h5>
   <Π> {{όνομα επαφής}} </Π>
   <Π> {{person.σχέση}} </Π>
   <Π> {{person.phone}} </Π>
   </div>
   <br>
   </div>

Looping με χρήση του ngFor στο Angular

Μπορείτε να χρησιμοποιήσετε τη δομική οδηγία ngFor για να κάνετε δυναμικό βρόχο μέσω στοιχείων HTML στον ιστότοπό σας. Αυτό θα σας επιτρέψει να επαναλάβετε το ίδιο μπλοκ για έναν αριθμό αντικειμένων ή για έναν καθορισμένο αριθμό φορές.

Μπορείτε επίσης να το χρησιμοποιήσετε για να κάνετε άλλα κόλπα, όπως να παρακάμψετε κάθε ζυγό ή μονό αριθμό ή να διαμορφώσετε το πρώτο και το τελευταίο στοιχείο. Μπορείτε επίσης να το χρησιμοποιήσετε για να αποδώσετε δυναμικά πολλά αντικείμενα μέσα σε άλλα αντικείμενα.

Υπάρχουν άλλες οδηγίες Angular που μπορείτε να χρησιμοποιήσετε για να κάνετε τον ιστότοπό σας πιο δυναμικό. Αυτά περιλαμβάνουν τα ngIf, ngSwitch, ngStyle, ngClass και ngModel.