آموزش اتصال داده ها در انگولار ۲
آموزش اتصال داده ها در انگولار ۲
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش اتصال داده ها در انگولار ۲ خواهیم پرداخت.
اتصال دو طرفه یک عملکرد در Angular JS بود، اما از Angular 2.x به بعد حذف شده است. اما اکنون، از زمان وقوع کلاس ها در انگولار ۲، می توانیم به خواص در کلاس AngularJS متصل شویم.
فرض کنید اگر یک کلاس با نام کلاس داشتید ، ویژگی ای که دارای نوع و ارزش بود.
export class className {
property: propertytype = value;
}
سپس می توانید ویژگی یک تگ html را به ویژگی کلاس متصل کنید.
<html tag htmlproperty = 'property'>
سپس مقدار ویژگی به htmlproperty از html اختصاص داده می شود.
بیایید به یک مثال نگاه کنیم که چگونه می توان به اتصال داده ها دست یافت. در مثال، ما به نمایش تصاویری می پردازیم که در آنها منبع تصاویر از ویژگی های کلاس ما آمده است. در ادامه مراحل دستیابی به این هدف ذکر شده است.
مرحله ۱ – هر ۲ تصویر را دانلود کنید. برای این مثال، ما برخی از تصاویر ساده را که در زیر نشان داده شده است، دانلود می کنیم.
مرحله ۲ – این تصاویر را در پوشه ای به نام Images در فهرست برنامه ذخیره کنید. اگر پوشه تصاویر موجود نیست، لطفاً آن را ایجاد کنید.
مرحله ۳ – مطابق شکل زیر، محتوای زیر را در app.component.ts اضافه کنید.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
appTitle: string = 'Welcome';
appList: any[] = [ {
"ID": "1",
"url": 'app/Images/One.jpg'
},
{
"ID": "2",
"url": 'app/Images/Two.jpg'
} ];
}
مرحله ۴ – مطابق شکل زیر، محتوای زیر را در app.component.html اضافه کنید.
<div *ngFor = 'let lst of appList'>
<ul>
<li>{{lst.ID}}</li>
<img [src] = 'lst.url'>
</ul>
</div>
در فایل app.component.html فوق، ما به تصاویر موجود در کلاس خود دسترسی داریم.
خروجی
خروجی برنامه فوق باید به این صورت باشد –
لیست جلسات قبل آموزش آنگولار ۲
.svg)
دیدگاه شما