Angular 2 - 数据显示

在Angular JS中，很容易在HTML表单中显示类属性的值.

让我们举一个例子来了解有关数据显示的更多信息.在我们的示例中，我们将查看在HTML页面中显示类中各种属性的值.

步骤1 : 将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的数组，其类型为字符串.

• 我们将3个字符串元素定义为数组是绑定，显示和服务.

• 我们还定义了一个名为TutorialName的属性，其值为Angular 2.

第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页面中教程的名称是什么".

• 我们正在使用索引数组的值，用于显示数组中的3个主题.

步骤3 : 保存所有代码更改并刷新浏览器，您将获得以下输出.从输出中，您可以清楚地看到数据是根据类中属性的值显示的.

另一个动态绑定的简单示例是使用输入html标记.它只是在html标记中输入数据时显示数据.

对app/app.component.html文件进行以下更改，这是您的模板文件.

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

以上代码需要注意以下几点.

• [value] ="用户名" : 这用于将表达式username绑定到input元素的value属性.

• (input)="expression" : 这是一种将表达式绑定到input元素的输入事件的声明方式.

• username = $ event.target.value : 触发输入事件时执行的表达式.

• $ event : 由Angular在事件绑定中公开的表达式，其具有事件的有效负载的值.

当您保存所有代码更改并刷新时在浏览器中，您将获得以下输出.

现在，在输入框中键入一些内容，例如"Tutorialspoint".输出会相应改变.