Mam normalną tabelę danych Angular Material 2 DataTable z nagłówkami sortowania. Wszystkie rodzaje nagłówków działają dobrze. Z wyjątkiem tego, który ma obiekt jako wartość. Te w ogóle się nie sortują.
Na przykład:
<!-- 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>
zanotuj element.project.name
Oto konfiguracja displayColumn:
displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];
Zmiana 'project.name'
na 'project'
nie działa ani"project['name']"
czego mi brakuje? Czy to w ogóle możliwe?
Oto obiekty sortowania Stackblitz: Angular Material2 DataTable
Edycja: dzięki za wszystkie odpowiedzi. Już mam to do pracy z danymi dynamicznymi. Nie muszę więc dodawać instrukcji switch dla każdej nowej zagnieżdżonej właściwości.
Oto moje rozwiązanie: (Tworzenie nowego źródła danych, które rozszerza MatTableDataSource, nie jest konieczne)
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();
}
}
angular
angular-material2
rzymski
źródło
źródło
Odpowiedzi:
Trudno było znaleźć dokumentację na ten temat, ale jest to możliwe za pomocą
sortingDataAccessor
instrukcji i switch. Na przykład:źródło
sort
od wthis.dataSource.sort = sort;
ngAfterViewInit
, aby zadziałałoMożesz napisać funkcję w komponencie, aby uzyskać głęboką właściwość z obiektu. Następnie użyj go
dataSource.sortingDataAccessor
jak poniżejOraz w html
źródło
lodash
w moim projekcie, więc jeśli używaszlodash
, to rozwiązanie przekłada się na to:this.dataSource.sortingDataAccessor = _.get;
nie ma potrzeby ponownego wymyślania głębokiego dostępu do nieruchomości.Podaną odpowiedź można nawet skrócić, bez przełączania, o ile używasz notacji kropkowej dla pól.
źródło
Lubię rozwiązania @Hieu_Nguyen. Dodam tylko, że jeśli użyjesz lodash w swoim projekcie tak jak ja, to rozwiązanie przekłada się na to:
Nie ma potrzeby ponownego odkrywania głębokiego dostępu do nieruchomości.
źródło
displayedColumns
ścieżkę do wartości, np.['title', 'value', 'user.name'];
A następnie użyć jej<ng-container matColumnDef="user.name">
w szablonie.mat-sort-header
np.mat-sort-header="user.name"
Używam ogólnej metody, która pozwala na użycie kropki rozdzielonej ścieżki z
mat-sort-header
lubmatColumnDef
. To kończy się niepowodzeniem i po cichu zwraca undefined, jeśli nie może znaleźć właściwości podyktowanej ścieżką.Wystarczy ustawić akcesor danych
źródło
Dostosowałem się do wielu zagnieżdżonych poziomów obiektów.
źródło
Cannot find name '_isNumbervalue
i zakładając, że jest to metoda lodash, nie mogę znaleźć metody w module węzła.isNumber
istnieje. Nie znam wcześniej lodash, jeśli to jest to. Jak tego używam?Inna alternatywa, której nikt tu nie wyrzucił, najpierw spłaszcz kolumnę ...
Po prostu kolejna alternatywa, plusy i minusy dla każdego!
źródło
Po prostu dodaj to do źródła danych, a będziesz mieć dostęp do zagnieżdżonego obiektu
źródło
Próbuje sortować według elementu [„nazwa.projektu”]. Oczywiście element nie ma takiej właściwości.
Utworzenie niestandardowego źródła danych, które rozszerza MatTableDatasource i obsługuje sortowanie według właściwości zagnieżdżonych obiektów, powinno być łatwe. Zapoznaj się z przykładami w material.angular.io dokumentach dotyczących korzystania z niestandardowego źródła.
źródło
Miałem ten sam problem, testując pierwszą propozycję miałem kilka błędów, mogłem to naprawić dodając „przełącznik (właściwość)”
źródło
Użyj MatTableDataSource Sprawdź pełne rozwiązanie problemu MatSort
w HTML
źródło
Jeśli chcesz mieć tabelę materiałów kątowych z kilkoma rozszerzonymi funkcjami, takimi jak sortowanie obiektów zagnieżdżonych, zajrzyj na https://github.com/mikelgo/ngx-mat-table-extensions/blob/master/libs/ngx-mat -table / README.md .
Stworzyłem tę bibliotekę, ponieważ brakowało mi niektórych funkcji stołu matowego po wyjęciu z pudełka.
Zaawansowane sortowanie jest podobne do sugerowanej odpowiedzi @Hieu Nguyen, ale zostało nieco rozszerzone, aby mieć również prawidłowe sortowanie według wielkich i małych liter.
źródło