Angular 2-表格

简介

在Angular 2中，表格是我们经常使用的一种UI组件，它可以让我们方便地展示和操作数据。同时，Angular的双向数据绑定机制，可以让我们很方便地对表格中的数据进行增删改查操作。

使用

基本使用

我们可以通过以下代码来创建一个简单的表格：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

数据绑定

Angular 2中的数据绑定是双向的，我们可以利用这一特性，将表格与我们的数据模型进行绑定。

我们可以通过以下代码展示一个列表：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataList">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

分页

当我们需要展示大量数据时，我们可以选择对数据进行分页。Angular提供了一个名为ngx-pagination的第三方分页组件，它可以让我们快速地实现一个分页器。

我们可以通过以下代码来使用该组件：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of pagedData">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

<pagination-controls (pageChange)="onPageChange($event)"
                      directionLinks="false"
                      autoHide="true">
</pagination-controls>

排序

当我们需要对表格中的数据进行排序时，我们可以使用ngx-order-pipe第三方组件。该组件可以让我们方便地实现一个排序器。

我们可以通过以下代码来实现一个排序器：

<table>
  <thead>
    <tr>
      <th (click)="onSort('id')">编号</th>
      <th (click)="onSort('name')">姓名</th>
      <th (click)="onSort('age')">年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of pagedData | orderBy:orderByField:orderByDirection">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

结语

以上就是Angular 2中表格的基本用法。我们可以通过数据绑定和第三方组件，简单快速地实现一个高效的表格组件。