Angular 2-数据显示

在Angular 2中，我们可以使用许多方式来显示数据。本文将介绍Angular 2中一些比较常用的数据显示方式。

插值表达式

插值表达式是Angular 2中一种简单的数据绑定方式。它使用双花括号（{{}}）将表达式嵌入到HTML模板中，可以将组件中的数据绑定到模板中。

<p>{{userName}}</p>

在组件中定义：

export class AppComponent {
  userName: string = "Tom";
}

插值表达式还支持调用组件中的方法：

<button (click)="clickHandler()">Click me</button>
<p>{{getMessage()}}</p>

属性绑定

属性绑定是Angular 2中另一种常用的数据绑定方式。它使用方括号（[]）将组件中的属性绑定到HTML元素的属性中。

<input type="text" [value]="userName">

在组件中定义：

export class AppComponent {
  userName: string = "Tom";
}

事件绑定

事件绑定是Angular 2中一种让组件响应用户事件的方式。它使用小括号（()）将组件中的方法绑定到HTML元素的事件上。

<button (click)="clickHandler()">Click me</button>

在组件中定义：

export class AppComponent {
  clickHandler() {
    console.log("Hello, World!");
  }
}

ngFor

ngFor是Angular 2中用于循环遍历数组或对象的指令。它通常与模板语法一起使用，将数据逐一渲染到页面上。

<ul>
  <li *ngFor="let user of userList">
    {{user.name}}
  </li>
</ul>

在组件中定义：

export class AppComponent {
  userList: Array<any> = [
    {name: "Tom", age: 18},
    {name: "Lucy", age: 20},
    {name: "John", age: 22}
  ];
}

ngIf

ngIf是Angular 2中用于条件判断的指令。它可以根据组件中的表达式，动态的创建或删除元素。

<div *ngIf="isShow">
  <p>Hello, World!</p>
</div>

在组件中定义：

export class AppComponent {
  isShow: boolean = true;
}

以上就是Angular 2中一些常用的数据显示方式。使用这些方法，我们可以更方便的将组件中的数据展示到页面上。