1. WIKI教程
2. 学习Angular2
3. angular2 - 数据显示( Data Display)

angular2 - 数据显示( Data Display)

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

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

Step 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的数组，其类型为string。

• 我们将3个字符串元素定义为数组的一部分，即Binding，Display和Services。

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

Step 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个主题。

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

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

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

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

关于上述代码需要注意以下几点。

• [value] = ”username” - 用于将表达式username绑定到input元素的value属性。

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

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

• $event - Angular在事件绑定中公开的表达式，它具有事件有效负载的值。

保存所有代码更改并刷新浏览器后，您将获得以下输出。

现在，在“输入”框中键入内容，例如“IoWiki”。 输出将相应改变。