Angular 2 - 数据绑定

双向绑定是 AngularJS 中的一个功能，但在 Angular 2.x 及更高版本中已被移除。但是，现在由于 Angular 2 中类的出现，我们可以绑定到 AngularJS 类中的属性。

假设你有一个类，它包含一个类名和一个具有类型和值的属性。

export class className {
   property: propertytype = value;
}

然后，你可以将 html 标签的属性绑定到类的属性。

<html tag htmlproperty = 'property'>

该属性的值将被赋值给 html 的 html 属性。

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

步骤 1 - 下载任意两张图片。在本例中，我们将下载下面显示的一些简单图片。

步骤 2 - 将这些图片存储在 app 目录下的名为 Images 的文件夹中。如果 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 文件中，我们正在访问类中属性的图像。

输出

上述程序的输出应如下所示：

打印页面