2017-06-16 5 views
0

J'ai une fonction pour retourner le nom de la classe en fonction de la valeur. Pour vérifier le nombre d'appels de fonction, ajoutez le journal du compteur et de la console.Fonction inattendue déclencheur dans angular2 attr.class

ts

count: number = 0; 
    myColDiv(month) { 
     this.count++; 
     console.log('Start',this.count); 
     return "col-"+month; 
    } 

html

<div [attr.class]="myColDiv(month)"></div> 

appeler trop de fois valeurs de compteur a atteint plus de 100 également en page, cliquez le déclenchement de cette fonction et incrémente le compteur , ne sais pas comment se fait cette fonction.

<div (click)="myColDiv(month)"></div> 

Vérifié sur les déclenchements par clic uniquement lorsque vous cliquez uniquement sur la div. Composants primeng utilisés également dans mon application.

+0

La liaison aux méthodes est découragée, parce que la méthode sera appelée à chaque détection de changement de temps est exécuté. Si la méthode renvoie de nouvelles instances d'objet pour un appel ultérieur, vous obtiendrez même une erreur du type "L'expression a changé depuis sa dernière vérification". Au lieu de cela, affectez la valeur à une propriété et liez cette propriété. –

+0

Oui, bien sûr, je vais utiliser cette fonction pour plusieurs placel, Si je lie à la propriété, la valeur sera changée partout, n'est-ce pas? –

+0

Désolé, je ne comprends pas la question. –

Répondre

0

Ce n'est pas ainsi que vous assignez une classe à un élément.

Modifiez la logique de votre méthode myColDiv pour enregistrer le résultat sur this.myColDivClass dans votre contrôleur. Après cela changer votre div où vous voulez appliquer la classe à ce qui suit:

<div [ngClass]="[myColDivClass]"></div> 
+0

Il n'y a pas besoin de '[]' autour de 'myColDivClass' –

+0

True. Je suis juste habitué à toujours inclure les crochets juste au cas où je devrais en ajouter un autre plus tard et j'ai été enclin à oublier les crochets après cela. –

+0

[ngClass] = "countVal()" a tenté d'appeler plusieurs fois. –