角度4：ソートマット・テーブルrxjsの再来

Question

してください、私は材料設計テーブル（マット・テーブル）を介して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); 
     }); 
} 
} 

私の接続（ ）メソッドが動作していない、私はストアとsortChange変更を聞く必要があり、誰もこれで助けることができますか？ ありがとうございました

Answer 1

this._sort.sortChange

方法のためのマット・テーブルの作品の、あなたがいずれかの列をクリックするまで、この観測可能な、任意のイベントを生成しません。

あなたはこのようデフォルトの初期値を追加することができます。

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

Answer 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))) 

Runnableをテスト：CodePen