Comment utiliser [ngClass] dans un composant * ngFor Angular sans un index local keeper?

J'utilise le balisage suivant pour marquer le composant cliqué comme actif.Comment utiliser [ngClass] dans un composant * ngFor Angular sans un index local keeper?

<div *ngFor="let menu of menus;" 
    (click)="onClick($event,menu.link)" 
    [ngClass]="{'active':menu.active}"> 
    {{menu.title}} 
</div>

La méthode de gestion du clic est la suivante.

onClick(target, link) { 
    target.active = !target.active; 
    this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]); 
}

Il semble que la valeur de target.active va de undefined à true à false à true etc. mais le style ne soit pas défini. (J'imprime le composant entier à la console et ne peux pas voir l'addition du nom de la classe.)

Question: Que manque-je dans cette approche? NB, je sais comment le résoudre en l'approchant d'un angle différent. J'ai mis en place une variable locale en gardant l'index et en le réglant like shown here. Le but de ma question est d'apprendre à atteindre le comportement demandé d'une manière plus comme un autoritaire.

Source

2017-08-21 Anonymous

target ici:

onClick(target, link) { 
    target.active = !target.active; <------------ 
    this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]); 
}

ne se réfère pas menu, il fait référence à l'événement. Mais en fonction de votre directive ngClass:

[ngClass]="{'active':menu.active}">

Vous devez définir active-menu variable et il peut donc être fait comme ceci:

<div *ngFor="let menu of menus;" 
    (click)="onClick(menu,menu.link)" 
    [ngClass]="{'active':menu.active}"> 
    {{menu.title}} 
</div>

Source

2017-08-21 08:46:56

Ce fut une explication claire impressionante. Je vous +2 mais je ne peux pas. Vous obtenez seulement +1 en raison des limites du site. Un suivi rapide, tant que nous sommes sur une approche autoritaire. Si je veux que le reste des éléments de menu perdent l'état * actif * lorsque l'un d'entre eux l'obtient en cliquant dessus, y a-t-il une astuce? Comme vider un tableau de détenteurs de composants liés ou quelque chose? –

@AndyJ, merci. 'this.menus.forEach ((m) => m.active = false)'? –

Ouais, je fais quelque chose de similaire à ceci: 'this.menus.forEach (_ => _active = _ === target);' mais j'espérais encore plus de douceur, comme si une reliure était mise , puis le reste perd automagiquement le réglage précédent. Peut-être que je le pense trop. Votre réponse est plus que suffisante. Merci mon pote! –

Au lieu de passer dans l'événement $, envoyez le réel objet de menu. Comme ceci:

<div *ngFor="let menu of menus;" 
    (click)="onClick(menu)" 
    [ngClass]="{'active':menu.active}"> 
    {{menu.title}} 
</div>

Et dans le composant:

onClick(menu) { 
    menu.active = !menu.active; 
    this.router.navigate([{ outlets: { primary: [""], menus: [menu.link] } }]); 
}

Source

2017-08-21 08:48:51

Comment utiliser [ngClass] dans un composant * ngFor Angular sans un index local keeper?

Répondre

Questions connexes