1
votes

* ngFor - impossible de rendre les éléments dynamiquement - Angular 6 - Bouton de menu Mat

Jusqu'à présent, j'ai,

  this.ItemList = [{
    "item1":"value-1".
    "item2":"value-2".
    "item3":"value-3".
    "item4":"value-4".
    }];

<button mat-button mat-raised-button color="warn" [matMenuTriggerFor]="menu" (click)='dummyBtn($event)'>List of values</button>
  <mat-menu #menu="matMenu" *ngFor = "let list of ItemList">
    <button mat-menu-item>Item 1</button>
    /*<button mat-menu-item>Item 2</button>
    <button mat-menu-item>Item 2</button>*/
  </mat-menu>

Je ne vois aucune erreur dans la console. mais en même temps, les valeurs ne sont pas rendues, mais elles affichent simplement des valeurs codées en dur.

pourrait-on me dire comment y parvenir? l'exemple de stackblitz existant semble compliquer la génération d'un élément dynamique. ou est-ce vraiment impossible avec mon approche?

pls, ne pas voter sans raison. J'ai rencontré quelques exemples, qui n'aident pas pour le moment merci

javascript typescript angular ngfor

4 commentaires

Dans ItemList, vous avez . au lieu de ,

Bizarre, vous n'obtenez aucune erreur dans la console étant donné que vous avez des erreurs de syntaxe dans le code dactylographié

Votre ItemList ne contient qu'un seul objet. Vous devrez peut-être itérer les valeurs de clé de cet objet.

lols .. je viens de taper par moi-même juste pour montrer ici comme exemple de données.

3 Réponses :

2
votes

Pourriez-vous essayer ceci et me faire part des résultats?

<mat-menu #menu="matMenu" *ngFor = "let list of ItemList">
<button mat-menu-item>{{list}}</button>
/*<button mat-menu-item>{{list}}</button>
<button mat-menu-item>{{list}}</button>*/
</mat-menu>

3 commentaires

list est également un objet, et vous voulez une chaîne dans le corps du bouton. Je ne sais pas quelle est l'idée derrière la structure ItemList d'OP, mais cela devrait probablement être {{list.item1}}

{{list.item1}} n'affichera qu'une seule valeur, pour les parcourir toutes, {{list}} doit être utilisé.

@sid .. . .

1
votes

Se sentir plus mal. Je viens de faire une erreur stupide,

déclarer une variable dans une fonction, donc la portée de 'let abc' n'est pas vivante en dehors de la fonction.
var qui a été déclarée n'est pas un tableau

Je viens de corriger les erreurs ci-dessus. fonctionne maintenant comme prévu

0 commentaires

0
votes

déclarer objectKeys = Object.keys dans le fichier ts et en html,

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item *ngFor="let key of objectKeys(ItemList[0])">
    {{ ItemList[0][key] }}
  </button>
</mat-menu>

1 commentaires

c'est aussi une autre manière. Génial!