2016-10-07 1 views
3

Ich bin neu in Angular 2 und hatte gehofft Hilfe von der Community zu bekommen. Ich versuche derzeit, eine dynamische/bedingte Implementierung von ngClass in einem <tr> Element meiner HTML-Ansicht zu implementieren. Die trufy verwendet wird, ist eine Variable und sein ursprünglicher Wert stammt aus einem JSON-Objekt auf meiner Componenet gesetzt:Angular 2 ngClass: Hole Get interpolation ({{}}) wo expression erwartet wurde, wenn ich versuche, json auf html anzuzeigen

<td [ngClass] = "{weak : {{jsonInMyComponenet.element}}, neutral : !{{jsonInMyComponenet.element}}}" ></td> 

Wenn ich den Code oben ich diesen Fehler:

Got Interpolation ({{}}) wo Ausdruck erwartet wurde

Wenn ich die geschweiften Klammern lösche, erhalte ich keine Fehler, aber die Seite rendert das Element nicht, also kann ich die Klassenimplementierung des schwachen noch Null nicht sehen. Was mache ich falsch?

Antwort

3

Verwenden Sie nicht [...] und {{...}} zusammen. Entweder das eine oder das andere.

<td [ngClass] = "{'weak' : jsonInMyComponenet.element, 'neutral' : !jsonInMyComponenet.element}" ></td> 

{{...}} ist für die String-Interpolation. [...] interpretiert den Wert als Ausdruck.

+1

Danke Gunter, ja ich habe es entfernt, aber die Klasse rendert nicht. Es würde entweder die Zelle eine Hintergrundfarbe von rot oder grau haben, und es ist derzeit weiß. Ich bin nicht sicher, ob vielleicht Daten meine Json ist falsch: { "jsonInMyComponenet": true, "jsonInMyComponenet1": false, "jsonInMyComponenet2": true} – eagleEye

+0

ich vergessen haben, die setzen müssen Eigenschaftsnamen in Anführungszeichen, wenn sie Literalnamen sind. –

+0

Ok, in diesem Fall, wie wäre es mit denen, die zu falsch auswerten sollten? Ich habe '! JsonInMyComponenet.element' und! '! JsonInMyComponenet.element' versucht, aber rendert nicht :( – eagleEye

Verwandte Themen