ورود / ثبت نام
0
0

آموزش directives در Angularjs 2

251 بازدید
directives

directives

آنگولار ۲ ، directives بسیاری را به صورت توکار ارائه می دهد. همین این دایرکتیوها رفتار خاصی را برای عناصر DOM فراهم می کند. در این مقاله سعی می کنیم *ngFor directive را بررسی کنیم پس با ما همراه باشید:

*ngFor

ngFor directive  برای هر یک از آیتم های مجموعه یک قالب را تکرار می کند که به ngReatedirective در  AngualrJS ۱.x بسیار شبیه است. در اینجا هر قالب دامنه مخصوص به خودش را دارد که در آن متغیرهای مربوط به حلقه برای آیتم های مجموعه فعلی تنظیم شده است. در هر قالب یک مجوعه از خصوصیت های مربوط به متغیرها وجود دارد که برای بررسی(iteration) مجموعه بسیار مفید است.

به محض ایجاد هرگونه تغییری در هر iterator،دایرکتیوngFor  ، عملکرد را به DOM تغییر می دهد برای مثال، اگر یک آیتمی اضافه شود، نمونه قالب جدید به DOM اضافه می شود. به صورت مشابه اگر یک آیتم حذف شود نمونه قالب از DOM حذف می شود. گار آیتم ها دوباره مرتب بشوند قالب های مربوطه نیز در DOM دوباره مرتب می شوند.

Syntax


< *ngFor="let item of items; let i = index; trackBy: trackByFn">... >

یا

< template=”ngFor let item of items; let i = index; trackBy: trackByFn”>… >

در اینجا می توانیم هر تگ HTML  را با *ngFor استفاده کنیم مثل tr، وli  غیره.

اثر ستاره ای(The asterisk (*) effect)

با یان دایرکتیو از اثر ستاره ای به عنوان یک پیشوند استفاده می کنیم.انگولار ۲، اثر ستاره ای را با فرم طولانی جایگزین کرده است. بنابراین به استفاده از این دایرکتیو یا استفاده از این دایرکتیو با قالب نیازمندیم. مثال زیر هردو سناریو را بررسی می کند.

مثال:

در مثال پایین، دو آرایه از متغیرها در مولفه ام(component ) دارم و اطلاعات آرایه را با استفاده از ngFor directive چاپ می کنم.

app.component.ts

import { Component } from '@angular/core';  
@Component({  
  selector: 'test-app',  
  templateUrl: './app/directiveExample.html'  
})  
export class AppComponent {   
    testArray:Array<any> =[{id:1, name:'Test 1'},{id:2, name: 'Test 2'},{id:3, name: 'Test 3'}];  
  empDataArray:Array<any> =[{id:1, name:'Jignesh'},{id:2, name: 'Tejas'},{id:3, name: 'Rakesh'}];  
} 

directiveExample.html



<h4>*ngFor in Angular 2 Application</h4>


<div>

<h4>*ngFor Example</h4>


<table border="1" width="20%">  
        

<tr>  
            

<th width="50%">Id</th>


<th width="50%">Name</th>


  
        </tr>


<tr *ngFor="let item of testArray;">   
            

<td>{{item.id}}</td>


<td>{{item.name}}</td>


  
        </tr>


  
    </table>


  
</div>


<div>

<h4>ngFor Example with template</h4>


<table border="1" width="20%">  
        

<tr>  
            

<th width="50%">Id</th>


<th width="50%">Name</th>


  
        </tr>


<tr template="ngFor let item of empDataArray;">   
            

<td>{{item.id}}</td>


<td>{{item.name}}</td>


  
        </tr>


  
    </table>


  
</div>


 

خروجی

directives

این دایرکتیو متغیر/خصوصیت، ویژه ای دارد که در ادامه معرفی می شوند.

  1. Index

یک مقدار عددی را به حلقه فعلی نسبت می دهد که شماره متن هر قالب را نمایش می دهد.

directiveExample.html



<div>

<h4>ngFor Example -- index</h4>


<table border="1" width="20%">  
        

<tr>  
            

<th width="50%">Id</th>


<th width="50%">Name</th>


  
        </tr>


<tr template="ngFor let item of empDataArray;let i=index">   
            

<td>{{i+1}}</td>


<td>{{item.name}}</td>


  
        </tr>


  
    </table>


  
</div>


خروجی

directives

  1. First

یک متغیر از نوع بولین که اگر آیتم در بررسی اول باشد True می شود و قطعه کد زیر اولین عنصر آرایه را مخفی می کند.

directives

directiveExample.html



<div>

<h4>ngFor Example -- first</h4>


<table border="1" width="20%">  
        

<tr>  
            

<th width="50%">Id</th>


<th width="50%">Name</th>


  
        </tr>


<tr *ngFor="let item of empDataArray; #first=first" [hidden]="first">   
            

<td>{{item.id}}</td>


<td>{{item.name}}</td>


  
        </tr>


  
    </table>


  
</div>


خروجی

directives

  1. last

یک متغیر از نوع بولین که اگر آیتم در بررسی آخری باشد True می شود و قطعه کد زیر آخرین عنصر آرایه را مخفی می کند.

directiveExample.html



<div>

<h4>ngFor Example -- last</h4>


<table border="1" width="20%">  
        

<tr>  
            

<th width="50%">Id</th>


<th width="50%">Name</th>


  
        </tr>


<tr *ngFor="let item of empDataArray; #last=last" [hidden]="last">   
            

<td>{{item.id}}</td>


<td>{{item.name}}</td>


  
        </tr>


  
    </table>


  
</div>


خروجی

directives

۴. even

یک متغیر بولی که اگر ایندکس آیتم زوج باشد true  می شود. کد زیر فقط عناصری که ایندکس زوج داشته باشند نمایش داده می شوند.

directiveExample.html



<div>

<h4>ngFor Example -- even</h4>


<table border="1" width="20%">  
        

<tr>  
            

<th width="50%">Id</th>


<th width="50%">Name</th>


  
        </tr>


<tr *ngFor="let item of empDataArray; #even=even" [hidden]="even">   
            

<td>{{item.id}}</td>


<td>{{item.name}}</td>


  
        </tr>


  
    </table>


  
</div>


  

خروجی

directives

۵. odd

یک متغیر بولی که اگر ایندکس آیتم فرد باشد true  می شود. کد زیر فقط عناصری که ایندکس فرد داشته باشند نمایش داده می شوند.

directiveExample.html



<div>

<h4>ngFor Example -- odd</h4>


<table border="1" width="20%">  
        

<tr>  
            

<th width="50%">Id</th>


<th width="50%">Name</th>


  
        </tr>


<tr *ngFor="let item of empDataArray; #odd=odd" [hidden]="odd">   
            

<td>{{item.id}}</td>


<td>{{item.name}}</td>


  
        </tr>


  
    </table>


  
</div>


  

خروجی

directives

نتیجه گیری:

این مقاله در یادگیری ngFor directive در انگولار ۲ کمک می کند که یکسری متغیر/ویژگی مخصوص داشته که در بررسی در مجموعه ها مفید است.

توجه:

در اینجا، ملزومات پروژه برای اجرا را اضافه نکردم برای اجرای این پروژه باید دستور “npm install” را اجرا کرده تا ملزومات پروژه دانلود شود.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=22899
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
محمد دهقانی
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد آموزش directives در Angularjs 2

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.