آموزش نمایش داده ها در انگولار ۲

آموزش نمایش داده ها در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش نمایش داده ها در انگولار ۲ خواهیم پرداخت.

در Angular JS، نمایش مقدار ویژگی های کلاس در فرم HTML بسیار آسان است.

بیایید یک مثال بزنیم و درباره نمایش داده ها بیشتر بدانیم. در مثال ما، به نمایش مقادیر خواص مختلف در کلاس خود در یک صفحه HTML می پردازیم.

مرحله ۱ – کد فایل app.component.ts را به شکل زیر تغییر دهید.

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

نکات زیر باید در مورد کد بالا ذکر شود.

• ما در حال تعریف یک آرایه به نام appList کدام یک از نوع رشته هستیم.
• ما ۳ عنصر رشته را به عنوان بخشی از آرایه که Binding ، Display و Services است تعریف می کنیم.
• ما همچنین یک ویژگی به نام TutorialName تعریف کرده ایم که دارای مقدار Angular 2 است.

مرحله ۲ – تغییرات زیر را در فایل app/app.component.html که فایل قالب شما است اعمال کنید.

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

نکات زیر باید در مورد کد بالا ذکر شود.

• ما به ویژگی TutorialName اشاره می کنیم تا بگوییم “نام آموزش در صفحه HTML ما چیست”.
• ما از مقدار index برای آرایه برای نمایش هر یک از ۳ موضوع در آرایه خود استفاده می کنیم.

مرحله ۳ – تمام تغییرات کد را ذخیره کرده و مرورگر را تازه کنید ، خروجی زیر را دریافت خواهید کرد. از خروجی ، به وضوح می بینید که داده ها مطابق مقادیر خواص در کلاس نمایش داده می شوند.

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

تغییرات زیر را در فایل app/app.component.html که فایل قالب شما است اعمال کنید.

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

نکات زیر باید در مورد کد بالا ذکر شود.

• [value] = ”username” – این مورد برای اتصال عبارت نام کاربری به ویژگی مقدار عنصر ورودی استفاده می شود.
• (input) = ”expression” – این یک روش اعلانی برای اتصال یک عبارت به رویداد ورودی عنصر ورودی است.
• username = $event.target.value– عبارتی که هنگام روشن شدن رویداد ورودی اجرا می شود.
• event$ – عبارتی که در پیوندهای رویداد توسط Angular نشان داده می شود ، که دارای ارزش بار رویداد است.

هنگامی که همه تغییرات کد را ذخیره کرده و مرورگر را تازه می کنید، خروجی زیر را دریافت خواهید کرد.

اکنون چیزی را در کادر ورودی مانند “Tutorialspoint” تایپ کنید. بر این اساس خروجی تغییر می کند.

منبع.

لیست جلسات قبل آموزش آنگولار ۲

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲
12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
13. آموزش مدیریت خطا در انگولار ۲
14. آموزش مسیریابی در انگولار ۲
15. آموزش ناوبری در انگولار ۲
16. آموزش فرم ها در انگولار ۲
17. آموزش CLI در انگولار ۲
18. آموزش تزریق وابستگی در انگولار ۲
19. آموزش پیکربندی پیشرفته در انگولار ۲
20. آموزش کنترل های شخص ثالث در انگولار ۲