Ich habe eine normale Angular Material 2 DataTable mit Sortierüberschriften. Alle Sortierungen sind Header funktionieren gut. Außer dem mit einem Objekt als Wert. Diese sortieren überhaupt nicht.
Zum Beispiel:
<!-- Project Column - This should sort!-->
<ng-container matColumnDef="project.name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell>
</ng-container>
beachten Sie das element.project.name
Hier ist die displayColumn-Konfiguration:
displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];
Das Wechseln 'project.name'
zu 'project'
funktioniert weder noch"project['name']"
Was vermisse ich? Ist das überhaupt möglich?
Hier ist ein Stackblitz: Angular Material2 DataTable- Sortierobjekte
Edit: Danke für all deine Antworten. Ich habe es bereits mit dynamischen Daten arbeiten lassen. Ich muss also nicht für jede neue verschachtelte Eigenschaft eine switch-Anweisung hinzufügen.
Hier ist meine Lösung: (Das Erstellen einer neuen DataSource, die MatTableDataSource erweitert, ist nicht erforderlich.)
export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> {
sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) => string | number) =
(data: WorkingHours, sortHeaderId: string): string | number => {
let value = null;
if (sortHeaderId.indexOf('.') !== -1) {
const ids = sortHeaderId.split('.');
value = data[ids[0]][ids[1]];
} else {
value = data[sortHeaderId];
}
return _isNumberValue(value) ? Number(value) : value;
}
constructor() {
super();
}
}
quelle
Antworten:
Es war schwierig, eine Dokumentation dazu zu finden, aber es ist möglich,
sortingDataAccessor
eine switch-Anweisung zu verwenden. Zum Beispiel:quelle
sort
von inthis.dataSource.sort = sort;
ngAfterViewInit
Sie können eine Funktion in eine Komponente schreiben, um tiefgreifende Eigenschaften vom Objekt zu erhalten. Verwenden Sie es dann
dataSource.sortingDataAccessor
wie unten beschriebenUnd in HTML
quelle
lodash
in meinem Projekt. Wenn Sie es verwendenlodash
, bedeutet diese Lösung Folgendes: Siethis.dataSource.sortingDataAccessor = _.get;
müssen den Deep Property-Zugriff nicht neu erfinden.Die angegebene Antwort kann sogar gekürzt werden, ohne dass ein Schalter erforderlich ist, solange Sie die Punktnotation für die Felder verwenden.
quelle
Ich mag @Hieu_Nguyen Lösungen. Ich füge nur hinzu, dass, wenn Sie lodash in Ihrem Projekt wie ich verwenden, die Lösung folgendermaßen übersetzt wird:
Sie müssen den Deep Property Access nicht neu erfinden.
quelle
displayedColumns
's als Pfad zu den Werten benennen , dh['title', 'value', 'user.name'];
und dann<ng-container matColumnDef="user.name">
in Ihrer Vorlage verwenden.Ich verwende eine generische Methode, mit der Sie einen dot.seperated.path mit
mat-sort-header
oder verwenden könnenmatColumnDef
. Dies schlägt unbemerkt fehl, wenn die vom Pfad vorgegebene Eigenschaft nicht gefunden werden kann.Sie müssen nur den Datenzugriff festlegen
quelle
Ich habe für mehrere verschachtelte Objektebene angepasst.
quelle
Cannot find name '_isNumbervalue
und vorausgesetzt, dies ist eine lodash-Methode, kann ich die Methode im Knotenmodul nicht finden.isNumber
existiert. Ich bin bisher nicht mit lodash vertraut, wenn es das ist. Wie benutze ich das?Eine andere Alternative, die hier niemand rausgeworfen hat, ist, die Säule zuerst zu plattieren ...
Nur eine weitere Alternative, Vor- und Nachteile für jeden!
quelle
Fügen Sie dies einfach Ihrer Datenquelle hinzu und Sie können auf das verschachtelte Objekt zugreifen
quelle
Es wird versucht, nach Element ['project.name'] zu sortieren. Offensichtlich hat element keine solche Eigenschaft.
Es sollte einfach sein, eine benutzerdefinierte Datenquelle zu erstellen, die MatTableDatasource erweitert und das Sortieren nach verschachtelten Objekteigenschaften unterstützt. Schauen Sie sich die Beispiele in den Dokumenten zu material.angular.io zur Verwendung einer benutzerdefinierten Quelle an.
quelle
Ich hatte das gleiche Problem, indem ich den ersten Satz testete, bei dem ich einige Fehler hatte, konnte ich ihn beheben, indem ich "switch (property)" hinzufügte.
quelle
Verwenden MatTableDataSource prüfen komplette MatSort Problem Lösung
in HTML
quelle