دستور‌العمل های شرطی و کنترلی در انگولار ۲ + NgFor, NgIf, NgSwitch, NgClass

با بررسی و مطالعه‌ی فصول گذشته از سری مجموعه آموزشی فارسی انگولار ۲ با نحوه‌ی ساخت یک پروژه مقدماتی آشنا شدید، سپس تکنیک‌ها و فرآیندهای موردنیاز را برای ساخت فرم نظردهی مطالب بکار بردید. در نهایت امر در فصل ۲ آشنایی اجمالی و مفیدی از زبان برنامه نویسی تایپ اسکریپت بدست آوردید. حال در ادامه به معرفی سایر امکانات، ابزارها و دستورالعمل‌ها یا به عبارتی قواعد نگارشی این کتابخانه قدرتمند می‌پردازیم. انگولار ۲ تعدادی از دستورالعمل‌های Built-in را جهت اعمال دستورهای شرطی و منطقی فراهم کرده است. در این فصل هر یک از این دستورالعمل‌ها را به همراه یک مثال کاربردی مورد بررسی قرار می‌دهیم. در نظر داشته باشید دستورالعمل‌های Built-in به صورت خودکار و اتوماتیک درون کامپوننت‌های شما فراخوانی (Import) می‌شوند. بنابراین برای استفاده نیازی به تزریق آنها نیست. با ما همراه باشید.

دستورالعمل NgIf

دستورالعمل NgIf هنگامی‌که می‌خواهید یک المان را متناسب با شرایط خاصی مخفی کنید و یا نمایش بدهید، مورد استفاده قرار می‌گیرد. این دستورالعمل متناسب با شرطی که به آن انتساب داده خواهد شد، عمل می‌کند. درصورتیکه شرط برقرار نباشد مقدار false بازگردانده خواهد شد و در نتیجه المان موردنظر از DOM حذف می‌‎شود.

به مثالهای زیر توجه کنید:

<div *ngIf="false"></div> این المان هرگز نمایش داده نمی‌شود.
<div *ngIf="a > b"></div> اگر a بزرگتر از b‌ باشد این المان نمایش داده می شود.
<div *ngIf="str == 'yes'"></div> در صورتیکه مقدار str‌ برابر yes‌ شود این المان نمایش داده می شود.
<div *ngIf="myFunc()"></div> درصورتیکه تابع myFunc مقدار true‌ را برگرداند این المان داده می شود.

دستورالعمل NgSwitch

در بعضی موارد نیاز داریم المان‌هایی متناسب با شرایط خاص خودشان را در خروجی نمایش دهیم. در این حالت از دستورالعمل ngSwitch استفاده می‌کنیم. به عبارتی دیگر، دستور ngSwitch، چندین بار دستور ngIf را تکرار می‌کند. به مثال زیر توجه کنید:

<div class="container">
   <div *ngIf="myVar == 'A'">Var is A</div>
   <div *ngIf="myVar == 'B'">Var is B</div>
   <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
</div>

همانطور که مشاهده می‌کنید در مثال بالا ۳ بار از دستور ngIf با شروط مختلف استفاده شده است. حال درنظر بگیرید که عبارت معادل C را میخواهید به مجموعه دستورهای بالا اضافه کنید، در این صورت باید مجددا دستور ngIf را به کدهای بالا اعمال کرده و یک تگ div‌ دیگر ایجاد کنید. اینگونه نمایش همواره برای برنامه‌نویسان دشوار است. بنابراین از دستور ngSwitchCase‌ یا ngSwitchDefault استفاده می‌شود.

دستور ngSwitchCase برای تک تک Case ها و دستور ngSwitchDefault برای نمایش مقادیری بغیر از شروط بکار گرفته می‌شود. مثال زیر را دنبال کنید:

<div class="container" [ngSwitch]="myVar">
   <div *ngSwitchCase="'A'">Var is A</div>
   <div *ngSwitchCase="'B'">Var is B</div>
   <div *ngSwitchDefault>Var is something else</div>
</div>

همانطور که مصتحضر هستید، می‌توان شرط ngSwitchDefault را حذف کرد.

دستورالعمل NgStyle

با استفاده از این دستورالعمل، می‌توان یک استایل خاصی را به یک المان منتسب کرد. یکی از ساده‌ترین راه‌ها برای استفاده از این دستورالعمل نوشتن عبارت style.<cssproperty> = "value" است. برای مثال داریم:

<div [style.background-color]= "'yellow'">
    Uses fixed yellow background
</div>

با اعمال دستورالعمل فوق ویژگی CSSای معادل background-color‌ به مقدار yellow تغییر رنگ می‌دهد.

راه‌حل دیگر برای اعمال ویژگی‌های CSS بیشتر برای یک المان استفاده کردن از key ها برای هر ویژگی است. به مثال زیر توجه کنید:

<div [ngStyle]="{color: 'white', 'background-colo': 'blue'}">
    Uses fixed white text on blue background
</div>

دستورالعمل بالا ویژگی‌های color و background-color‌ را متناسب با مقادیر سفید و آبی، اعمال می‌کند.

اما قدرت واقعی دستورالعمل NgStyle هنگامی نمود پیدا می‌کند که بخواهیم از مقادیر داینامیک یا پویا استفاده کنیم. در مثال زیر دو جعبه ورودی تعریف شده است:

<div>
 <input type="text" name="color" value="{{color}}" #colorinput>
</div>

<div>
 <input type="text" name="fontSize" value="{{fontSize}}" #fontinput>
</div>

و در نهایت استفاده کردن از این مقادیر برای ویژگی‌های CSS سه المان مختلف. سایز فونت موردنظر را براساس ورودی دریافتی برای اولین المان به صورت زیر اعمال می‌کنیم:

<div>
    <span [ngStyle] = "{color: 'red'}" [style.font-size.px]="fontSize">
      red text
    </span>
</div>

در المان دوم رنگ را متناسب با ورودی دریافتی تغییر می‌دهیم. همچنین در المان سوم مجددا رنگ پس زمینه را تغییر داده و در کنار آن از یک استایل inline (درون خطی) استفاده کرده ایم.:

<div>
    <span [ngStyle] = "{color: 'red'}" [style.font-size.px]="fontSize">
      red text
    </span>
</div>

<div>
    <span [ngStyle] = "{color: color}">
      {{ color }} text
    </span>
</div>

<div>
    <span [style.background-color] = "color" style="color:white;">
      {{ color }} background
    </span>
</div>

دستورالعمل NgClass

این دستورالعمل توسط صفت ngClass در قالب HTML شما کد می‌شود و اجازه‌ی تغییر پویای کلاس‌های CSS را برای یک المان DOM فراهم می‌کند.

یکی از روش‌های استفاده از این دستورالعمل، ارسال یک شیء واقعی است. از این شیء انتظار می‌رود که یک key یا کلید به عنوان نام کلاس و یک مقدار یا value با مقدار true یا false جهت بکارگیری کلاس CSS یا عدم استفاده از آن، نمایش دهد. اجازه بدهید با استفاده از یک مثال این موضوع را روشن‌تر کنیم. درنظر بگیرید یک کلاس CSS با عنوان bordered در اختیار داریم که سرتاسر هر المان را با یک حاشیه (border) مشکی احاطه می‌کند. استایل CSS این کلاس به صورت زیر خواهد بود:

.bordered{
    border: 1px dashed black;
    background-color: #eee;
}

حال دو المان div اضافه می‌کنیم: یکی از این المان‌ها از کلاس bordered پیروی می‌کند ولی دیگری هرگز از این کلاس بهره نمی‌برد:

<div [ngClass]="{bordered: flase}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

همواره درنظر داریم که داینامیک کردن یک کلاس CSS بسیار ارزشمندتر از استفاده ی استاتیک آن است. بنابراین برای داینامیک ساختن این کلاس یک متغییر به عنوان value شیء اضافه می‌کنیم:

<div [ngClass]="{bordered: isBordered}">
    Using object literal. Border {{ isBordered ? "ON" : "OFF"}}
</div>

روش دیگر نیز اضافه و تعریف کردن این کلاس داخل کامپوننت است که به صورت زیر امکان‌پذیر می‌باشد:

export class NgClassSampleApp{
    isBordered: boolean;
    classesObj: Object;
    classList: string[];
}

و استفاده از شیء تعریف شده به صورت مستقیم در المان موردنظر:

<div [ngClass]="classesObj">
    Using object var. Border {{ classesObj.bordered ? "ON" : "OFF" }}
</div>

همچنین می‌توان از چندین کلاس برای یک المان بهره‌مند شد:

<div class="base" [ngClass]="['blue','round']">
    This will always have a blue background and
    round corners.
</div>

دستورالعمل NgFor

وظیفه و نقش این دستورالعمل تکرار یک المان یا مجموعه ای از المان‌ها به دفعات مشخص است. این تعداد تکرار متناسب با مقادیر یک آرایه مشخص می‌شوند. همانگونه که مشاهده کردید در بخش ۵-۱ مثالی از حلقه‌ی For برای ساخت فرم نظرسنجی مشابه سایت reddit بکار بردیم.

سینتکس و قواعد نحوی برای دستورالعمل تکرار به صورت زیر می باشد:

*ngFor="let item of items"

سینتکس let item یک متغیر مشخص است که هر یک از المان‌های آرایه‌ی items‌ را دریافت می‌کند.

items مجموعه‌ای از آیتم‌های موجود درون کنترلر است.

برای فهم بیشتر یک مثال ارائه خواهیم داد. در این مثال مجموعه‌ای از شهرها را درون یک متغییر به عنوان cities و داخل کنترلر تعریف می‌کنیم:

this.cities = ['Hamedan', 'Tehran', 'Shiraz']

و در نهایت داخل قالب موردنظر کدهای HTML زیر را قرار می‌دهیم:

<h4>
    Simple list of strings
</h4>

<div *ngFor="let c of cities">
    <div>{{ c }}</div>
</div>

در نهایت خروجی این مثال شامل ۳ تگ div با مقدار c که همان اسامی شهرها می باشد.

همچنین می‌توان آرایه ای از اشیاء را تکرار کرد. به مثال زیر توجه کنید:

this.people = [
    { name: 'Roxo', age: 35, city: 'Hamedan' },
    { name: 'Ask', age: 12, city: 'Tehran' },
    { name: 'Masoud', age: 26, city: 'Shiraz' },
]

و خروجی را به صورت جدولی برای مخاطبان به نمایش گذاشت:

<h4>
    لیست اشیاء
</h4>

<table>
    <thead>
        <tr>
            <th>نام</th>
            <th>سن</th>
            <th>شهر</th>
        </tr>
    </thead>
    <tr *ngFor="let p of people">
        <td>{{ p.name }}</td>
        <td>{{ p.age }}</td>
        <td>{{ p.city }}</td>        
    </tr>
</table>

از طرفی می‌توان از آرایه‌های تودرتو استفاده کرد. جهت تفهیم این مورد مثال ذیل را دنبال کنید:

this.peopleByCity = [
    {
        city: 'Hamedan',
        people: [
            { name: 'Masoud', age: 26 },
            { name: 'Roxo', age: 36 },
        ]
    },
    {
        city: 'Tehran',
        people: [
            { name: 'Ask', age: 22 },
            { name: 'RoxoShop', age: 16 },
        ]
    }
];

خروجی مورد استفاده در کدهای HTML می‌تواند به شکل زیر باشد:

<div *ngFor="let item of peopleByCity">
    <h2>{{ item.city }}</h2>
    <table>
        <thead>
            <tr>
                <th>نام</th>
                <th>سن</th>
            <tr>
        </thead>
        <tr *ngFor="let p of item.people>
            <td>{{ p.name }}</td>
            <td>{{ p.age }}</td>
        </tr>
    </table>
</div>

دستیابی به یک ایندکس مشخص

برخی مواقع به index هر یک از آیتمهایی که در حلقه تکرار وجود دارند نیاز داریم. بنابراین برای دستیابی به آن از سینتکس let idx = index درون عبارت *ngFor استفاده خواهیم کرد.همچنین این عبارت با استفاده از علامت سیمیکالون ; (نقطه ویرگول) از عبارت قبلی جدا می‌شود. توجه داشته باشید که ایندکس‌ها همواره از ۰ شروع می‌شوند.

تغییرات کوچکی در مثال فوق خواهیم داشت تا مبحث ایندکس درون حلقه ngFor را به شما آموزش دهیم:

<div *ngFor="let c of cities; let num = index">
    <div> {{ num+1 }} - {{ c }}</div>
</div>

دستورالعمل NgNonBindable

این دستورالعمل هنگامی مورد استفاده قرار می‌گیرد که بخواهیم یک بخش از صفحه را کامپایل یا بارگذاری نکنیم. به عنوان مثال ما میخواهیم یک متن داخل {{ content }} را درون قالب خود به نمایش بگذاریم. در حالت نرمال و عادی این متن درون متغییر content قرار گرفته است زیرا از سینتکس قالب {{}} استفاده کرده ایم. حال سوال اینجاست که چگونه می‌توان دقیقا عبارت {{ content }} را در خروجی به نمایش گذاشت؟ در این صورت از دستورالعمل ngNonBindable استفاده می‌کنیم. به مثال زیر توجه کنید:

template: `
    <div>
        <span class="bordered"> {{ content }} </span>
        <span class="pre ngNonBindable"> 
            This is what {{ content }} rendered.
        </span>
    </div>
`

در نهایت با اعمال صفت ngNonBindable به کلاس span موردنظر، به انگولار ۲ اطلاع می‌دهیم که چگونه دستورهای داخل {{}} را عینا در خروجی به نمایش بگذارد.

همانگونه که ملاحظه کردید، در انگولار ۲، تنها تعداد محدودی از دستورها یا به عبارتی دستورالعمل‌های کنترلی و شرطی وجود دارد که در این بخش به تفصیل به همراه ذکر مثال آنها را شرح دادیم. در نظر داشته باشید با ترکیب این دستورها می‌توان ساختارهای پویا و قدرتمندی برای نرم افزار تحت وب خود ایجاد کنید.

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

توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید. (این دوره در حال برگزاری است)