الحلقة ngFor في #angular

يستخدم angular  الحلقات بملفات الـ templates  عن طريق التعليمة *ngFor وهي مكافئة لـ for  أو foreach في لغة php   و for  في الـ java و  C  وغيرها من لغات البرمجة الاخرى

في العادة تستخدم الحلقات المصفوفات  arrays   

مثال عملي

لنضع بملف app.component.html   هذه التعليمات

<ul>
    <li *ngFor="let user of users"> {{ user.name }} </li>
 </ul>

ونضع بيانات الاعضاء بملف app.component.ts

public users:any= [   
      {username:'a123' , email:'a123@gmail.com' ,age:27},      {username:'b123' , email:'b123@gmail.com' ,age:23},      {username:'c123' , email:'c123@gmail.com' ,age:23},      {username:'d123' , email:'d123@yahoo.com',age:24},    ];

لتكون بهذا الشكل

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
   public users:any= [   
      {username:'a123' , email:'a123@gmail.com' ,age:27},      {username:'b123' , email:'b123@gmail.com' ,age:23},      {username:'c123' , email:'c123@gmail.com' ,age:23},      {username:'d123' , email:'d123@yahoo.com',age:24},    ];
 

}

النتيجة  : 

a123
b123
c123
d123