Заголовок сортировки не работает с данными из угловой службы - PullRequest
Новая
       29

Заголовок сортировки не работает с данными из угловой службы

0 голосов
/ 30 апреля 2018

Я пытаюсь реализовать базовую таблицу переменных (дата, вес) с помощью Угловой материал .

Сортировка уже реализована с помощью "MatSort" и прекрасно работает для меня (см. Официальный пример здесь ).

Теперь я хочу получить данные из 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 () и переписать сортировку ... ( см. Здесь ). Но я не уверен, что мне это нужно, поскольку я не хочу отменять сортировку.

Заранее благодарим за помощь!

1 Ответ

0 голосов
/ 30 апреля 2018

Наконец проблема была в пропаже: 

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

Я тестирую некоторый код на Stackblitz, когда меня нет дома, и извлекаю некоторый код, когда я возвращаюсь, но я забыл сделать этот импорт ... И использование MatSort без импорта не выдает ошибку !

Я открываю для этого вопрос ( # 11079 ) на angular / material2.

...