web-dev-qa-db-fra.com

Comment créer un mat-table imbriqué dans un tableau avec des lignes extensibles en utilisant angular material

J'ai les données ci-dessous

[
    {
        "_id": "c9d5ab1a",
        "subdomain": "wing",
        "domain": "aircraft",
        "part_id": "c9d5ab1a",
        "info.mimetype": "application/json",
        "info.dependent": "parent",
        "nested": [
            {
                "domain": "aircraft",
                "_id": "c1859902",
                "info.mimetype": "image/jpeg",
                "info.dependent": "c9d5ab1a",
                "part_id": "c1859902",
                "subdomain": "tail"
            }
        ]
    },
    {
        "_id": "1b0b0a26",
        "subdomain": "fuel",
        "domain": "aircraft",
        "part_id": "1b0b0a26",
        "info.mimetype": "image/jpeg",
        "info.dependent": "no_parent"
    }
]

Ici si "info.dependent": "parent" alors il est imbriqué et si "info.dependent": "no_parent" alors il n'a pas d'enfant. J'ai essayé de créer une table dynamique mais je ne sais pas comment la rendre pliable/extensible avec une table imbriquée. Voici mon code sur stackblitz .

<mat-table class=" mat-elevation-z8" [dataSource]="dataSource">

    <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
        <mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element[col] }} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row;columns:displayedColumns"></mat-row>

</mat-table>

. ts 

public data = [
    {
        "_id": "c9d5ab1a",
        "subdomain": "wing",
        "domain": "aircraft",
        "part_id": "c9d5ab1a",
        "info.mimetype": "application/json",
        "info.dependent": "parent",
        "nested": [
            {
                "domain": "aircraft",
                "_id": "c1859902",
                "info.mimetype": "image/jpeg",
                "info.dependent": "c9d5ab1a",
                "part_id": "c1859902",
                "subdomain": "tail"
            }
        ]
    },
    {
        "_id": "1b0b0a26",
        "subdomain": "fuel",
        "domain": "aircraft",
        "part_id": "1b0b0a26",
        "info.mimetype": "image/jpeg",
        "info.dependent": "no_parent"
    }
];

dataSource = new MatTableDataSource([]);
displayedColumns = ['_id', 'subdomain', 'domain', 'part_id', 'info.mimetype', 'info.dependent'];

constructor(){
    this.displayedColumns = this.displayedColumns;
    this.dataSource = new MatTableDataSource(this.data);
}

Format requis : -> nested table

Le format imbriqué est comme ci-dessous

ligne 1 -> _id, sous-domaine, domaine, info.dependent

Lorsque nous cliquons sur cette ligne particulière, elle doit ensuite se développer et afficher les données imbriquées dans un tableau avec les noms de colonne et les données de ligne.

"nested": [
    {
        "domain": "aircraft",
        "_id": "c1859902",
        "info.mimetype": "image/jpeg",
        "info.dependent": "c9d5ab1a",
        "part_id": "c1859902",
        "subdomain": "tail"
    }
]
javascripthtmlangulartypescriptangular-material
8
Dexter

En regardant le exemples de la documentation surtout celui avec la ligne extensible :

  • Vous manquez la directive multiTemplateDataRows dans le <mat-table>
  • Le @detailExpand le déclencheur est manquant
  • ...

Ici est l'exemple de la documentation avec vos données

Modifier (concernant le commentaire)

Voici comment obtenir les colonnes dynamiques:

Ajoutez ceci à votre composant

  getKeys(object): string[] {
    return Object.keys(object);
  }

utilisez la méthode dans le modèle (modèle mis à jour en fonction de l'écran de détails ci-joint et de la note sur les multiples éléments sous la touche nested):

<div class="example-element-descriptions">
    <div *ngFor="let nested of element['nested']"
         class="example-element-description">
        <div *ngIf="element['info.dependent'] === 'parent'">
            <div class="example-element-description__header">
                <div class="example-element-description__cell"
                     *ngFor="let key of getKeys(nested)">{{key}}</div>
            </div>
            <div class="example-element-description__content">
                <div class="example-element-description__cell"
                     *ngFor="let key of getKeys(nested)">{{element[key]}}
                </div>
            </div>
        </div>
        <div *ngIf="element['info.dependent'] === 'no_parent'">no parent</div>
    </div>
</div>
0
kasptom