角度4：排序mat-table rxjs redux答案

【问题标题】：angular 4 : sort mat-table rxjs redux角度4：排序mat-table rxjs redux
【发布时间】：2017-11-09 19:56:12
【问题描述】：

请，我需要对通过材料设计表（mat-table）从 redux 商店加载的数据进行排序，这是我的示例：

export class HistoryData extends DataSource<History> {

constructor(private store: Store<fromHistory.State>, private _sort: MatSort) {
    super();
}

connect(): Observable<History[]> {
    return Observable.combineLatest(
        this.store.select(fromHistory.getHistory),
        this._sort.sortChange
    ).map(([history, _]) => {
        return this.sortData(history);
    });
}

disconnect(collectionViewer: CollectionViewer): void {
    console.log('disc');
}

sortData(data: History[]): History[] {
        return data.sort((a, b) => {
            let propertyA: Date | string = '';
            let propertyB: Date | string = '';
            [propertyA, propertyB] = [b.updateOn, a.updateOn];

            const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
            const valueB = isNaN(+propertyB) ? propertyB : +propertyB;

            return (valueA < valueB ? -1 : 1) * (this._sort.direction === 'asc' ? 1 : -1);
        });
}
}

我的 connect() 方法不起作用，我需要监听 store 和 sortChange 的变化，有人可以帮忙吗？谢谢

【问题讨论】：

标签： angular redux rxjs angular-material

【解决方案1】：

this._sort.sortChange

由于 mat-table 的工作方式，此 observable 在您单击其中一列之前不会生成任何事件。

您可以通过这种方式添加默认初始值：

merge(of({ active: 'column', direction: 'asc'}), this._sort.sortChange)

【讨论】：

【解决方案2】：

您使用哪些测试数据得到什么输出？

在我看来，将 valueA < valueB 反转为 valueA > valueB 就可以了。

console.clear() 
const Observable = Rx.Observable

const direction = 'asc'
const sortData = (data: History[]) => {
  return data.sort((a, b) => {
    let propertyA: Date | string = '';
    let propertyB: Date | string = '';
    [propertyA, propertyB] = [b.updateOn, a.updateOn];
    const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
    const valueB = isNaN(+propertyB) ? propertyB : +propertyB;
    return (valueA > valueB ? -1 : 1) * (direction === 'asc' ? 1 : -1);
  });
}

/*
  Tests
*/
// sort descending to ascending
const data1 = [
  {updateOn: new Date("2017-03-25")},
  {updateOn: new Date("2017-03-24")},
  {updateOn: ''},
  {updateOn: new Date("2017-03-23")},
]
direction = 'asc'
const result1 = sortData(data1)  //.map(x => x.updateOn.toString().substring(0,15))
console.log(result1.map(x => x.updateOn.toString().substring(0,15)))

// sort ascending to descending
const data2 = [
  {updateOn: new Date("2017-03-23")},
  {updateOn: new Date("2017-03-24")},
  {updateOn: ''},
  {updateOn: new Date("2017-03-25")},
]
direction = 'dsc'
const result2 = sortData(data2)
console.log(result2.map(x => x.updateOn.toString().substring(0,15)))

// sort jumbled to descending
const data3 = [
  {updateOn: new Date("2017-03-24")},
  {updateOn: new Date("2017-03-23")},
  {updateOn: ''},
  {updateOn: new Date("2017-03-25")},
]
direction = 'dsc'
const result2 = sortData(data2)
console.log(result2.map(x => x.updateOn.toString().substring(0,15)))

可运行测试：CodePen

【讨论】：