Matériel angulaire 2 DataTable Tri avec objets imparables

Question

J'ai un normal Angulaire Matériel 2 DataTable avec les en-têtes. Toutes sortes sont les en-têtes de fonctionner correctement. À l'exception de celui avec un objet comme valeur. Ces n'a pas de tri à tous.

Par exemple:

 <!-- 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>

remarque l' element.project.name

Voici la displayColumn config:

 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];

Évolution 'project.name' de 'project' ne fonctionne pas, ni "project['name']"

Ce qui me manque? Est-ce même possible?

Voici un Stackblitz: Angulaire Material2 trier les objets DataTable

Edit: Merci pour toutes vos réponses. J'ai déjà eu à travailler avec des données dynamiques. Donc je n'ai pas pour ajouter une instruction switch pour chaque nouveau imbriquée de la propriété.

Voici ma solution: (Création d'une nouvelle source de données qui s'étend MatTableDataSource n'est pas nécessaire)

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();
  }
}

Answer 1

Il était difficile de trouver de la documentation à ce sujet, mais il est possible d'utiliser `` et un relevé de commutateur. Par exemple :

Answer 2

Vous pouvez écrire une fonction dans le composant pour obtenir la propriété profondément de l'objet. Ensuite, utilisez-le `` comme ci-dessous

Et en html

Answer 3

La réponse telle qu'elle est donnée peut même être raccourcie, aucun interrupteur requis, tant que vous utilisez la notation de point pour les champs.

Answer 4

J'utilise une méthode générique qui vous permet d'utiliser un dot.seperated.path avec ou . Cela ne parvient pas à retourner silencieusement indéfini si elle ne peut pas trouver la propriété dictée par le chemin.

Vous avez juste besoin de définir l'accesseur de données

Answer 5

J'ai personnalisé pour plusieurs niveaux d'objet imparable.