我尝试用Angular Material实现变化的基本表（日期，重量） .
排序已经用"MatSort"实现，对我来说很有用（参见官方示例here） .
现在我想从HTTP请求GET中检索数据，角度服务返回Observables . 它适用于填充数据表但排序不再有效， Headers 上没有箭头...
weight.component.ts
@ViewChild(MatSort) sort: MatSort;
dataSource = new MatTableDataSource<Weight>();
constructor(
private _weightsService: WeightsService,
) {}
ngOnInit() {
this._weightsService.getWeights().subscribe(data => {
this.dataSource.data = data;
this.dataSource.data = this.dataSource.data;
});
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
weight.component.html
<mat-table #table [dataSource]="dataSource" matSort>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
<!-- Date Column -->
<ng-container matColumnDef="date">
<mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.date | amDateFormat:'DD/MM/YYYY'}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef mat-sort-header> Poids </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.weight}} </mat-cell>
</ng-container>
</mat-table>
weight.service.ts
@Injectable()
export class WeightsService {
constructor(private _httpClient: HttpClient) {}
getWeights(): Observable<Weight[]> {
return this._httpClient.get<Weight[]>(URI).map(results => {
results.forEach(weight => (weight.date = moment(weight.date)));
return results;
});
}
weight.ts
import * as moment from 'moment';
export class Weight {
constructor(public id: number, public date: moment.Moment, public weight: number) {}
}
我已经尝试在数据的订阅中移动排序行，但它不能正常工作 .
我不明白如何从HTTP检索数据并使排序工作！我见过，我可以创建一个实现DateSource，connect（），disconnect（）和重新排序排序的新类...（see here） . 但是我想要覆盖排序 .
提前感谢您的帮助！
1 回答
最后问题是失踪：
当我不在家时，我在Stackblitz上测试了一些代码，当我回来时检索一些代码，但是我忘了做这个导入...而使用MatSort而不导入它不会引发错误！
我在angular / material2上为此（#11079）打开了一个问题 .