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 个字符串元素定义为 Binding、Display 和 Services 数组的一部分。
-
我们还定义了一个名为 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>
关于上述代码，需要注意以下几点。
-
[值] = “用户名” ： 用于将表达式 username 绑定到输入元素的 value 属性。
-
(输入)=“表达式” ：这是一种将表达式绑定到输入元素的输入事件的声明方式。
-
用户名 = $event.target.value ： 触发输入事件时执行的表达式。
-
$event ： Angular 在事件绑定中暴露的表达式，它具有事件有效负载的值。
当你保存所有代码更改并刷新浏览器时，你将获得以下输出。
现在，在输入框中输入一些内容，例如“Newbiego”。输出会相应改变。
