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>

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

• [value] = ”username” − 这用于将表达式用户名绑定到输入元素的 value 属性。

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

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

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

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

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