Question

我正在使用Angular5作为我正在学习的网络应用程序。在一个页面中，我需要有一个表，列出从Restful端点返回的信息。它返回的示例：

姓名，姓氏，年龄，群组等。

在客户端，我需要对每个列标题进行排序，并根据下拉选项进行过滤。做这个的最好方式是什么？使用类似ng-table的内容？还是用别的东西？我只是询问最佳实践以及这些事情是如何完成的，因为这是我第一次使用角度。

我正在使用Bootstrap 4，也有ng-bootstrap。感谢

Answer 1

使用bootstrap和angular我指示此组件：angular2-datatable

第1步=＆gt;安装：import {NgModule} from "@angular/core"; ... import {DataTableModule} from "angular2-datatable"; @NgModule({ imports: [ ... DataTableModule ], ... }) export class AppModule {}

第2步=＆gt; appModule.ts 添加导入：

...
export class DemoComponent implements OnInit {
    public data;
    public filterQuery = "";
    public rowsOnPage = 10;
    public sortBy = "age";
    public sortOrder = "asc";

constructor() {}

ngOnInit() {

this.data = [
  {
    "name": "Wing",
    "age": 25
  },
  {
    "name": "Whitney",
    "age": 32
  }];
}

public toInt(num: string) {
    return +num;
}

public sortByWordLength = (a: any) => {
    return a.name.length;
}

第3步=＆gt; yourComponent.ts

<table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
    <tr>
        <th style="width: 70%">
            <mfDefaultSorter by="name">Name</mfDefaultSorter>
        </th>

        <th style="width: 20%">
            <mfDefaultSorter by="age">Age</mfDefaultSorter>
        </th>

    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of mf.data">
        <td>{{item.name}}</td>
        <td class="text-right">{{item.age}}</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
    </tr>
    </tfoot>
</table>

第4步=＆gt; yourComponent.html

{{1}}

plunker

角度过滤器，排序和分页表

1 个答案: