Question

我尝试用Angular Material实现变化基本表（日期，重量）。

排序已经使用“MatSort”实现，对我很有用（参见官方示例here）。

现在我想从HTTP请求GET中检索数据，并使用角度服务返回Observables。它适用于填充数据表，但排序不再起作用，标题上没有箭头......

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）。但我不确定我是否需要，因为我不想覆盖排序。

提前感谢您的帮助！

Answer 1

最后问题是遗漏：

import { MatSortModule } from '@angular/material';

当我不在家时，我在Stackblitz上测试了一些代码，并在我回来时检索了一些代码，但是我忘记了这个导入......并且使用MatSort而不导入它不会引发错误！

我在angular / material2上为此（#11079）打开了一个问题。

排序标头不使用角度服务中的数据

1 个答案: