如何使用 matSort 对 mat-table 中的列进行排序?

拉什米·赖

我正在尝试在 mat-table 中实现排序,但它根本不起作用。我没有收到任何错误。

这是我的代码。

这是我的 component.ts 文件

export class TerminalsComponent implements OnInit {

      cols: string[] = ['select', 'serialKey', 'cameras', 'status', 'activeSince', 'created', 'updated', 'addCamera', 'more'];

      success: boolean;
      message: string;

      dataSource;

      expandedElement: any;

      initialSelection = [];
      allowMultiSelect = true;
      selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);

      @ViewChild(MatSort) sort: MatSort;
      constructor(public cs: Service) {

        this.getTerminals();
      }

      masterToggle() {
        this.isAllSelected() ?
          this.selection.clear()
          : this.dataSource.data.forEach(row => this.selection.select(row));
      }

      isAllSelected() {
        const numSelected = this.selection.selected.length;
        const numRows = this.dataSource.data.length;
        return numSelected === numRows;
      }

      // Expandable Row
      isExpansionDetailRow(i: number, row: Object) {
        return row.hasOwnProperty('detailRow');
      }

      getTerminals() {
        this.cs.getTerminals().subscribe(
          (response) => {
            this.success = response.success;
            this.message = response.msg;
            if (response.success) {
              this.dataSource = new MatTableDataSource(response.data);

              this.dataSource.sort  = this.sort;
              console.log(this.dataSource);

            }

            setTimeout(function () {
              this.message = "";
            }.bind(this), 2000);
          },
          (error) => {
            this.success = error.success;
            this.message = "Cannot get terminals" + error.message;
          }
        );
      }

      ngOnInit() { }

}

终端,垫表的数据源,是嵌套对象的数组。serialKey 是一个字符串。

这是我的 component.html 文件的代码片段。我已将 mat-sort-header 添加到 serialKey 列。

  <mat-table class="list-table" [dataSource]="dataSource" matSort matSortActive="serialKey" matSortDirection="asc">

    <ng-container matColumnDef="serialKey">
      <mat-header-cell mat-sort-header class="align-center" *matHeaderCellDef>Serial Key</mat-header-cell>
      <mat-cell class="align-center" *matCellDef="let element">{{element.serial_num}}
      </mat-cell>
    </ng-container>

    </mat-row>

  </mat-table>

如果有人能告诉我我在这里遗漏了什么,对表格进行排序,那就太好了。

元帅

我不得不将我的包裹在 setTimeout 中,如果这在您的情况下不起作用,请告诉我,我将删除此答案。

setTimeout(() = > this.dataSource.sort  = this.sort);

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

同一组件内带有MatSort的多个mat-table

角度matSort不排序

如何使用angular2中的mat-input对在mat-table列中输入的值求和

如何从mat-table中取消选择单行

如何使用多列向量对data.table进行排序

matSort在mat-table Angular中无法正常工作

MatSort无法正常工作。引发错误:必须使用MatSort指令将MatSortHeader放置在父元素中

如何在Angular 5 mat-table中拼接数据?

在Angular中使用分页获取排序的Mat-Table数据

使用mat-table对嵌套属性进行排序

mat-table-如何更新列宽

matSort无法与多个mat表一起使用

如何在扩展的Mat-row中而不是在Main table中显示mat-table

使用Mat-table进行内联文本编辑:

Mat Table:如何在Mat Table Angle中单击按钮以获取特定行中的特定元素?

Angular 7:使用服务中的数据作为MatTableDataSource对Mat-Table进行排序

如何从MatSort获取所有可排序的列

如何阻止mat-table调整其列的大小?

MatSort未排序,但数据已填充

如何以编程方式触发mat-table排序?

根据选择的mat-select值对mat-table进行排序

如何避免使用角度材料从角度 2 中的 mat-table 传输相同的行

matSort 标题根本不排序表

如何在 Mat Table - Angular 中添加一列?

如何使用 MatSort 从排序中跳过一行?

如何在Angular打字稿中使用MatSort以混合整数和字符串对gridview列进行排序

如何使用Mat Table按空格分隔的多个关键字进行搜索

如何使用 Angular Material 表 MatSort

如何访问 mat-table 的 TR 中的 MatTableDataSource 元素?