专业编程基础技术教程

网站首页 > 基础教程 正文

Angular 2-数据绑定 angular绑定事件

ccvgpt 2024-11-14 14:20:49 基础教程 7 ℃

双向绑定是Angular JS中的功能，但已从Angular 2.x及更高版本中删除。但是现在，由于发生了Angular 2中的类事件，我们可以绑定到AngularJS类中的属性。

假设您有一个带有类名的类，则该类具有一个类型和值。

Angular 2-数据绑定 angular绑定事件

export class className {
   property: propertytype = value;
}

然后，您可以将html标记的属性绑定到该类的属性。

<html tag htmlproperty = 'property'>

然后将属性的值分配给html的htmlproperty。

让我们看一个如何实现数据绑定的示例。在我们的示例中，我们将看显示图像，其中图像源将来自我们类的属性。以下是实现此目的的步骤。

步骤1-下载任何2张图像。对于此示例，我们将下载下面显示的一些简单图像。

步骤2-将这些图像存储在app目录中名为Images的文件夹中。如果图像文件夹不存在，请创建它。

步骤3-在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'
   } ];
}

步骤4-如下所示，在app.component.html中添加以下内容。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

在上面的app.component.html文件中，我们正在从类中的属性访问图像。

输出量

上面程序的输出应该是这样的-



Tags：

猜你喜欢

最近发表
标签列表