2017-06-16 4 views
0

Ich habe eine Funktion, um den Klassennamen basierend auf dem Wert zurückzugeben. Um die Funktion Calling Count zu überprüfen, wurde der Zähler und das Konsolenprotokoll hinzugefügt.Unerwarteter Funktionstrigger in 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> 

zu oft aufrufen Zählerwerte mehr als 100 auch auf Seite klicken erreicht diese Funktion auslösenden und erhöht den Zähler Ich weiß nicht, woher diese Funktion kommt.

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

Ein Klick auf Klick löst nur aus, während nur auf das div geklickt wird. Gebrauchte Primeng Komponenten auch in meiner App.

+0

Bindung an Methoden wird abgeraten, da das Verfahren wird jedes Mal, Änderungserkennung ausgeführt wird, aufgerufen werden. Wenn die Methode neue Objektinstanzen für einen nachfolgenden Aufruf zurückgibt, erhalten Sie sogar einen Fehler wie "Ausdruck hat sich seit der letzten Überprüfung geändert". Weisen Sie stattdessen den Wert einer Eigenschaft zu und binden Sie diese Eigenschaft. –

+0

Ja sicher, ich werde diese Funktion für mehrere placel verwenden, Wenn ich an Eigenschaft binden wird der Wert überall wo geändert, nicht wahr? –

+0

Sorry, ich verstehe die Frage nicht. –

Antwort

0

So weisen Sie einem Element keine Klasse zu.

Ändern Sie die Logik Ihrer myColDiv Methode, um das Ergebnis auf this.myColDivClass in Ihrem Controller zu speichern. Danach Ihre div ändern, in dem Sie die Klasse auf die folgende anwenden möchten:

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

Es gibt keine Notwendigkeit für '[]' um 'myColDivClass' –

+0

True. Ich bin nur daran gewöhnt, immer die Klammern zu verwenden, nur für den Fall, dass ich später noch einen hinzufügen muss, und ich war geneigt, die Klammern danach zu vergessen. –

+0

[ngClass] = "countVal()" versucht, obwohl mehrmals aufgerufen. –

Verwandte Themen