Question

我想在Object类型的表中使用SortHeader，我不想将表的类型更改为MatTableDataSource，有帮助吗？

这是我的数据源

null

我应该在ngOnInit（）中做什么？这不起作用

var userData = {
  a: 1,
  b: 2,
  c: null,
  d: 3,
  e: undefined
}
var userDataB = Object.assign({}, userData);
Object.keys(userDataB).forEach((key) => (userDataB[key] == null) && delete userDataB[key])
console.log(userDataB);

Answer 1

您需要听桌上的matSortChange事件。

<table #myTable mat-table [dataSource]="sortedData" matSort (matSortChange)="sortData($event)">

实施自定义排序逻辑，并在matSortChange触发时提供排序的数据。

@ViewChild('myTable') table: MatTable<Object>;

data: Object[] = [
    { name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4 },
    { name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4 },
    { name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6 },
    { name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4 },
    { name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4 },
];

sortedData: Object[];

constructor() {
    this.sortedData = this.data.slice();
}

sortData(sort: Sort) {
    const data = this.data.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }

    this.sortedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'name': return compare(a['name'], b['name'], isAsc);
        case 'calories': return compare(a['calories'], b['calories'], isAsc);
        case 'fat': return compare(a['fat'], b['fat'], isAsc);
        case 'carbs': return compare(a['carbs'], b['carbs'], isAsc);
        case 'protein': return compare(a['protein'], b['protein'], isAsc);
        default: return 0;
      }
    });
}

function compare(a: number | string, b: number | string, isAsc: boolean) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

如果您没有在排序事件中提供新的排序数组作为dataSource，而是就地进行排序（在现有dataSource数组中），那么您还必须在排序之后调用this.table.renderRows()因为该表不会自动检查数组的更改。

https://stackblitz.com/edit/angular-dwkods

如何将MatSort与Object []类型的表一起使用

1 个答案: