Dynamique imbriquée Matériel de menu de l'objet json Angulaire 5

Comment créer des dynamiques imbriquée menu de l'objet json?

J'ai commencé à utiliser Angulaire de la Conception des Matériaux, aujourd'hui, pour la première fois et je suis en train de créer des listes de menus à l'aide de la conception de matériel. Le la documentation est assez simple pour la statique des choses.

Mais j'ai besoin de créer des dynamiques imbriquée menu de l'objet json et je ne peux pas trouver une solution simple à ce n'importe où. Il a juste besoin d'être d'un niveau de profondeur.

objet json(pas fixés dans la pierre):

my_menu = {
    'main1': ['sub1', 'sub2'],
    'main2': ['sub1', 'sub2'],
}

qui donnerait quelque chose comme ça, mais de manière dynamique: résultat escompté exemple à stackblitz

J'ai essayé avec la construction en cours d'exécution *ngFor comme ça pour le menu principal, puis séparés sur chaque sous-menu, mais il a fini dans les erreurs.

<button mat-button [matMenuTriggerFor]="main_menu">My menu</button>

<mat-menu #main_menu="matMenu">
  <button *ngFor="let main_item of objectKeys(my_menu)" mat-menu-item [matMenuTriggerFor]="main_item">{{ main_item }}</button>
  <button mat-menu-item [matMenuTriggerFor]="main2">main2</button>
</mat-menu>

<mat-menu *ngFor="let sub_menu of objectKeys(my_menu)" #sub_menu="matMenu">
  <button *ngFor="let sub_name of sub_menu" mat-menu-item>{{ sub_name }}</button>
</mat-menu>

Je sais que c'est mal, mais c'est là que ma compréhension de angulaire terminé.

objectKeys retourne toutes les clés de l'objet à l'aide Object.keys qui est chargé à partir du fichier ts.

objectKeys = Object.keys;

PS. Je suis assez nouveau dans Angulaire également

OriginalL'auteur rain01 | 2018-01-08

19

La structure suivante devrait fonctionner pour vous:
```
<button mat-button [matMenuTriggerFor]="main_menu">My menu</button>

<mat-menu #main_menu="matMenu">
  <ng-container *ngFor="let mainItem of objectKeys(my_menu)">
    <button mat-menu-item [matMenuTriggerFor]="sub_menu">{{ mainItem }}</button>
    <mat-menu #sub_menu="matMenu">
       <button *ngFor="let subItem of my_menu[mainItem]" mat-menu-item>{{ subItem }}</button>
    </mat-menu>
  </ng-container>
</mat-menu>
```
Depuis que j'ai passé sub_menu à l'intérieur de l'embedded modèle ( *ngFor ), nous pouvons utiliser le même nom pour le modèle de référence variable(#sub_menu).

Stackblitz Exemple

merci beaucoup pour votre réponse. Je vais élargir la question, pour cela, je compose avec vos noms. Si j'avais un mainItem avec le point de tableau et l'un sans l'autre des paragraphes comment puis-je disparaître la flèche de l'mainItem qui n'a pas les éventuels sous-éléments de façon dynamique? @yurzui

OriginalL'auteur yurzui

Voici un exemple StackBlitz des arbitrairement une profonde imbrication basé sur JSON (rédigé par @Splaktar)

La clé de l'arbitraire de nidification est l'auto-référencement menu-item.composant:

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {NavItem} from '../nav-item';

@Component({
  selector: 'app-menu-item',
  templateUrl: './menu-item.component.html',
  styleUrls: ['./menu-item.component.scss']
})
export class MenuItemComponent implements OnInit {
  @Input() items: NavItem[];
  @ViewChild('childMenu') public childMenu;

  constructor(public router: Router) {
  }

  ngOnInit() {
  }
}

<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
  <span *ngFor="let child of items">
    <!-- Handle branch node menu items -->
    <span *ngIf="child.children && child.children.length > 0">
      <button mat-menu-item color="primary" [matMenuTriggerFor]="menu.childMenu">
        <mat-icon>{{child.iconName}}</mat-icon>
        <span>{{child.displayName}}</span>
      </button>
      <app-menu-item #menu [items]="child.children"></app-menu-item>
    </span>
    <!-- Handle leaf node menu items -->
    <span *ngIf="!child.children || child.children.length === 0">
      <button mat-menu-item [routerLink]="child.route">
        <mat-icon>{{child.iconName}}</mat-icon>
        <span>{{child.displayName}}</span>
      </button>
    </span>
  </span>
</mat-menu>

OriginalL'auteur Datum Geek

Vous devez vous connecter pour publier un commentaire.