Mon mat-table fonctionne correctement, mais lors de l'ajout de mat-sort en suivant la documentation officielle de l'API, il échoue sur ngAfterViewInit avec le message suivant
Impossible de définir la propriété 'sort' de non défini sur ViewFeedbackComponent.ngAfterViewInit
Il y a déjà un post SO sur ce problème (voir lien suivant) La démo de tri du tableau mat ne fonctionne pas mais je ne parviens toujours pas à le faire fonctionner.
Est-ce que quelqu'un repère le problème? L'exemple officiel fonctionne avec un MatTableDataSourcedefined "statique" dans le composant lui-même, mais je l'interroge depuis mon back-end.
Toute aide est grandement appréciée!
MatSortModule est déjà importé dans app.module.ts, des directives mat-sort-header sont appliquées aux colonnes et ngAfterViewInit est déjà exactement comme dans l'exemple officiel ...
import { Component, OnInit, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';
import { Feedback} from '../../../../../models/feedback';
import { FeedbackService} from '../../services/feedback.service';
import { MatTableDataSource, MatSort} from '@angular/material';
@Component({
selector: 'app-view-feedback',
templateUrl: './view-feedback.component.html',
styleUrls: ['./view-feedback.component.css'],
encapsulation: ViewEncapsulation.Emulated
})
export class ViewFeedbackComponent implements OnInit, AfterViewInit {
feedbacks: Feedback[] = [];
showSpinner: boolean = true;
displayedColumns: String[] = [
'id',
'user',
'timestamp',
'stars'
];
dataSource: MatTableDataSource < Feedback > ;
@ViewChild(MatSort) sort: MatSort;
constructor(private _feedbackService: FeedbackService) {}
ngOnInit() {
this._feedbackService.getFeedback.subscribe(
res => {
this.feedbacks = res;
this.dataSource = new MatTableDataSource(this.feedbacks);
}
);
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
}
<div class="mat-tbl-container mat-elevation-z8">
<mat-table #tbl [dataSource]="dataSource" matSort>
<!-- column definitions -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r._id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="user">
<mat-header-cell *matHeaderCellDef mat-sort-header>User Id</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r.user}} </mat-cell>
</ng-container>
<ng-container matColumnDef="timestamp">
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r.timestamp}} </mat-cell>
</ng-container>
<ng-container matColumnDef="stars">
<mat-header-cell *matHeaderCellDef mat-sort-header>Stars</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r.stars}} </mat-cell>
</ng-container>
<!-- tbl display settings -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Le problème est que le prochain morceau de code
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
se passe-t-il avant que votre table ne soit abonnée ici:
ngOnInit() {
this._feedbackService.getFeedback.subscribe(
res => {
this.feedbacks = res;
this.dataSource = new MatTableDataSource(this.feedbacks);
}
);
}
Comme solution possible, vous pouvez synchroniser l'appel ngAfterViewInit
et l'abonnement getFeedback
via Observable.Zip
. Veuillez vous référer à documentation RxJS Zip
J'utilise l'ancienne méthode de tri d'une ancienne version de angular-material. Le dernier exemple de tri de matériau angulaire utilise ngAfterViewInit()
pour appeler sort this.dataSource.sort = this.sort;
. Impossible de faire fonctionner le tri avec le nouvel exemple. L'ancienne méthode de tri utilisée étend DataSource. J'ai pu importer DataSource en utilisant un nouveau chemin `import {DataSource} de '@ angular/cdk/table';
import { Component, ViewChild, Inject, OnInit, ElementRef } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpResponse, HttpHeaders, HttpRequest} from '@angular/common/http';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
export interface Data {}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myData: Array < any > ;
displayedColumns = ['id', 'name'];
dataSource: MyDataSource;
@ViewChild(MatSort) sort: MatSort;
constructor(private http: HttpClient) {}
getData() {
let url = 'https://api.mydatafeeds.com/v1.1/cumulative_player_data.json?';
let headers = new HttpHeaders({ "Authorization": "123ykiki456789123456" });
this.http.get(url, {headers})
.subscribe(res => {
this.myData = res;
this.dataSource = new MyDataSource(this.myData, this.sort);
});
}
ngOnInit() {
this.getData();
}
}
export class MyDataSource extends DataSource < any > {
constructor(private dataBase: Data[], private sort: MatSort) {
super();
}
/** Connect function called by the table to retrieve one stream containing the data to render. */
connect(): Observable < Data[] > {
const displayDataChanges = [
Observable.of(this.dataBase),
this.sort.sortChange,
];
return Observable.merge(...displayDataChanges).map(() => {
return this.getSortedData();
});
}
disconnect() {}
/** Returns a sorted copy of the database data. */
getSortedData(): Data[] {
const data = this.dataBase.slice();
if (!this.sort.active || this.sort.direction == '') { return data; }
return data.sort((a, b) => {
let propertyA: number | string = '';
let propertyB: number | string = '';
switch (this.sort.active) {
case 'id':
[propertyA, propertyB] = [a.id, b.id];
break;
case 'name':
[propertyA, propertyB] = [a.name, b.name];
break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
});
}
}
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
<mat-cell *matCellDef="let data"> <b>{{data.id}}.</b>
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
<mat-cell *matCellDef="let data"> <b>{{data.name}}.</b>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let data; columns: displayedColumns;"></mat-row>
</mat-table>