在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".输出会相应改变.