使用 Angular 9 安装 ng-table

ng-table 是一个基于 Angular 的表格插件，它提供了许多强大的功能，如排序、筛选、分页等等。本文将介绍如何在 Angular 9 中安装和使用 ng-table。

1. 安装 ng-table

首先，我们需要通过 npm 安装 ng-table。

npm install ng-table --save

2. 导入 NgTableModule

接下来，我们需要在 app.module.ts 中导入 NgTableModule。

import { NgTableModule } from 'ng-table';

@NgModule({
  imports: [
    BrowserModule,
    NgTableModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在组件中使用 ng-table

现在，我们已经成功地安装了 ng-table，并将其导入到了我们的应用程序中。接下来，我们需要在组件中使用它。

import { Component } from '@angular/core';
import { NgTableComponent } from 'ng-table';

@Component({
  selector: 'app-root',
  template: `
    <ng-table [config]="tableConfig" [rows]="rows" (tableChanged)="tableChanged($event)">
      <ng-table-column [header]="'ID'" [sortable]="'id'" [filterable]="'id'">
        {{row.id}}
      </ng-table-column>
      <ng-table-column [header]="'Name'" [sortable]="'name'" [filterable]="'name'">
        {{row.name}}
      </ng-table-column>
    </ng-table>
  `
})
export class AppComponent {
  public rows = [
    {id: 1, name: 'John Doe'},
    {id: 2, name: 'Jane Doe'},
    {id: 3, name: 'Alice Bob'},
    {id: 4, name: 'Bob Alice'},
  ];

  public tableConfig = {
    paging: true,
    sorting: {columns: []},
    filtering: {filterString: '', columnName: 'name'}
  };

  public tableChanged(tableData) {
    console.log(tableData);
  }
}

在上面的代码中，我们创建了一个简单的 ng-table，它有两个列，分别是 ID 和 Name。我们还定义了一个名为 rows 的数组，包含了一些示例数据。然后，我们将这个数组传递给了 ng-table 的 [rows] 属性，将表格配置信息传递给了 [config] 属性，并注册了一个回调函数，在表格数据发生变化时会被调用。

4. 运行应用程序

最后，我们需要启动我们的应用程序，看看 ng-table 是否正常工作。

ng serve

通过浏览器打开 http://localhost:4200，我们应该可以看到一个包含数据的表格，并且可以点击表头进行排序或筛选。

总结

通过本文，我们学习了如何在 Angular 9 中安装和使用 ng-table。ng-table 提供了许多有用的功能，可以帮助我们轻松地创建强大的表格。如果您正在开发一个需要显示表格数据的应用程序，ng-table 绝对是一个值得考虑的选择。