Table et MatSort ne fonctionne pas avec

Question

Je observables ai essayé de suivre le guide pour les tables triables en matériaux (https://material.angular.io/components/sort/overview), et l'utiliser avec un tableau personnalisé au lieu de leur base de données exemple ne fonctionne pas tout à fait pour moi lorsque je tente pour créer la observable avec la fonction de fusion dans l'exemple (cela fonctionne quand je crée avec Observable.of())

Mon datasource ressemble:

export class StallEventsDataSource extends DataSource<StallEvent> { 
    constructor(private stallEvents: StallEvent[], private _sort: MatSort) { 
    super(); 
    } 

    connect(): Observable<StallEvent[]> { 
    const displayDataChanges = [ 
     this._sort.sortChange 
    ]; 

    return Observable.merge(...displayDataChanges).map(() => { 
     return this.getSortedData(); 
    }); 
    } 

    disconnect() { 
    } 

    getSortedData(): StallEvent[] { 
    return this.stallEvents; 
    } 
} 

les données apparaît (sans la fonctionnalité de tri , sans surprise), si je change

return Observable.merge(...displayDataChanges).map(() => { 
    return this.getSortedData(); 
}); 

à

return Observable.of(this.getSortedData()); 

Si elle aide, voici le modèle:

<mat-table #table [dataSource]="dataSource" matSort> 

    <ng-container matColumnDef="VideoTime"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Video Time </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{row.VideoTime}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="Duration"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Duration </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{row.Duration}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="AbsoluteStartTime"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Absolute Start Time </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{getDateString(row.TimestampStart)}} </mat-cell> 
    </ng-container> 

    <ng-container matColumnDef="AbsoluteEndTime"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> Absolute End Time </mat-header-cell> 
    <mat-cell *matCellDef="let row"> {{getDateString(row.TimestampEnd)}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="['VideoTime', 'Duration', 'AbsoluteStartTime','AbsoluteEndTime']"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: ['VideoTime', 'Duration', 'AbsoluteStartTime','AbsoluteEndTime']"></mat-row> 

</mat-table> 

Quelqu'un at-il aperçu de ce que je fais mal?

Answer 1

Essayez ça, changer

return Observable.merge(...displayDataChanges).map(() => { 

à

return Observable.merge(this.sort.sortChange).map(() => {