Angular 2 - 数据绑定

双向绑定是 Angular JS 中的一项功能，但已从 Angular 2.x 开始删除。但现在，自从 Angular 2 中的类出现以来，我们可以绑定到 AngularJS 类中的属性。

假设您有一个具有类名的类，一个具有类型和值的属性。

export class className {
   property: propertytype = value;
}

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

<html tag htmlproperty = 'property'>

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

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

步骤 1 - 下载任意 2 张图像。对于本示例，我们将下载如下所示的一些简单图像。

图片下载

步骤 2 - 将这些图像存储在应用程序目录中名为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 文件中，我们从类中的属性访问图像。

输出

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

数据绑定