2
votes

Comment donner des valeurs dynamiques pour [routerLink] qui correspond aux valeurs d'un tableau?

Je souhaite créer un routage dynamique dans mon modèle. Les valeurs de routage proviennent d'un tableau qui est itéré avec ngFor. Je souhaite également apporter des transformations à ces valeurs qui sont de type chaîne. Merci

​​J'ai essayé de mettre des valeurs à partir d'un tableau mais cela me donne cette erreur: Erreur: ne peut correspondre à aucun itinéraire. Segment d'URL: "items.label" Erreur: ne peut correspondre à aucun itinéraire. Segment d'URL: 'items.label'

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="['items.label'] " href="#" >
</li>


4 commentaires

Essayez de supprimer les guillemets simples de 'items.label'


Merci, mais comment puis-je transformer la valeur de items.label pour la mettre en minuscules?


J'utiliserais un "tuyau" qui peut transformer chacun de vos articles. Jetez un œil à ce lien.


Désolé, je l'ai utilisé mais je l'ai mal écrit. Ça fonctionne maintenant ! Merci !


4 Réponses :


2
votes

Il doit être sans les guillemets dans 'items.label' final

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="[items.label] " href="#" >
</li>


0 commentaires

1
votes

supprimer les guillemets simples

 <li *ngFor = "let items of this.labelsMenu|async">
        <a[routerLink]="[items.label]" href="#" >
    </li>


0 commentaires

0
votes

Supprimez les guillemets simples et href="#"

<li *ngFor = "let items of this.labelsMenu|async">
    <a [routerLink]="['items.label']">
</li>


0 commentaires

0
votes

Il vous suffit de supprimer les guillemets simples et href = '#' . J'espère que vous vouliez mettre href à cause du pointeur de la souris. Pour cela, vous pouvez ajouter un style dans votre balise comme indiqué style = "cursor: pointer" .

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="[items.label]" style="cursor: pointer">
</li>


0 commentaires