1

我正在尝试使 Teradata 共价数据表的所有列都可排序。我正在使用原子表组件，因为我必须向表中添加操作按钮。据我从文档中了解， (sortChange) 输出用于在我添加排序逻辑的组件代码中调用一个函数？由于某种原因，我的 Sort 函数永远不会对列进行排序......知道我在这里做错了什么吗？

更新

我看到当调用排序函数而不是包含特定列的鬃毛时，ITdDataTableSortChangeEvent 的 name 属性始终为空......知道如何通过设置列的 name 属性将该事件传递给排序函数吗？

my html code?

更新 2

在@Chic 的建议之后，我可以看到传递给排序函数的事件包含正确的数据，但是列仍然没有得到排序......

My filter function:

filter(): void {
        let newData: IEmployee[] = this.employees;
        let excludedColumns: string[] = this.columns
            .filter((column: ITdDataTableColumn) => {
                return ((column.filter === undefined && column.hidden === true) ||
                (column.filter !== undefined && column.filter === false));
            }).map((column: ITdDataTableColumn) => {
            return column.name;
        });
    newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
    this.filteredTotal = newData.length;
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
    this.filteredEmployees = newData;
  }

<table *ngIf="filteredEmployees.length > 0" td-data-table>
                <thead>
                    <tr td-data-table-column-row>
                        <th td-data-table-column [sortable]="true" [sortOrder]="'ASC'"  *ngFor="let column of columns" (sortChange)="sort($event)">
                            {{column.label}}
                        </th>
                        <th>
                            Action
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr td-data-table-row *ngFor="let row of filteredEmployees">
                        <td td-data-table-cell *ngFor="let column of columns">
                                {{row[column.name]}}
                        </td>
                        <td>
                            <mat-icon class="fa fa-edit fa-2x" (click)="editCashier(row)" matTooltip="Edit Cashier"></mat-icon>
                            <mat-icon class="fa fa-trash fa-2x" title="Delete" (click)="deleteCashier(row)" matTooltip="Delete Cashier" aria-label="Delete"></mat-icon>
                        </td>
                    </tr>
                </tbody>
            </table>

my sort function:

sort(sortEvent: ITdDataTableSortChangeEvent): void {
      console.log("sort called");
        this.sortBy = sortEvent.name;
        console.log(sortEvent.name);
        this.filter();
    }
4

1 回答 1

1

您将需要[name]="column.name"在组件上设置输入td-data-table-column。用于排序更改事件。

作为附加说明，确保您的过滤器函数在每次过滤以触发更改检测时更改数组引用（即创建一个新数组）。这不是针对版本自动1.0.0-rc.0完成的，但将来会为您完成。

于 2017-12-11T16:10:18.827 回答