Klassenattributwert durch Interpolation von Boolean hinzufügen

Question

Ich habe eine einfache Angular 2-App, die Werte aus einer JSON-API extrahiert und eine HTML-Liste dieser Werte ausgibt. Die Idee dahinter ist, aus den Ergebnissen progressiver API-Aufrufe eine Baumansicht zu erstellen, wenn Baumknoten in der Benutzeroberfläche geöffnet werden. obwohl ich behalte und nur ein einfaches JSON-Objekt wie dieses jetzt ist es einfach Rückkehr:

[ 
    {"Id":1054,"Name":"Rugby League","HasChildren":true}, 
    {"Id":1056,"Name":"Football","HasChildren":false} 
] 

Ich habe eine Angular 2 Komponente, die die Daten, wie diese verbraucht:

@Component({ 
    selector: 'content-list', 
    template: ` 
     <ol class="tree"> 
      <li *ngFor="#contentNode of contentNodes" class="tree__branch"> 
       {{ contentNode.Name }} 
      </li> 
     </ol> 
     <div class="error" *ngIf="errorMessage">{{errorMessage}}</div> 
    ` 
}) 

Es zieht die JSON-Daten und Maps zu der HTML-Liste, die eine <ol> im Browser ausgegeben zeigt.

Was ich tun möchte, ist eine zusätzliche Klasse auf das <li> Element, wenn der Wert von HasChildren aus dem JSON-Feed gesetzt true ist.

Ich dachte, es nur möglich wäre, den Wert so zu interpolieren:

<li *ngFor="#contentNode of contentNodes" class="tree__branch {{ contentNode.HasChildren ? "tree__branch--has-children" : "" }}"> 

Dies verursacht jedoch Template Kompilierungsfehlern.

Kann jemand vorschlagen, wie das funktioniert?

Vielen Dank.

Answer 1

Das ist, was ngClass für ist:

<li *ngFor="#contentNode of contentNodes" 
    class="tree__branch" 
    [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}"> 

Answer 2

working demo

für weitere Informationen über attr, Klasse, Stil und andere Sachen, Blick auf Cheat Sheet - https://angular.io/docs/ts/latest/cheatsheet.html

<li *ngFor="#contentNode of contentNodes" 
    class="tree__branch" 
    [class.tree__branch--has-children]="contentNode.HasChildren"> 
       {{ contentNode.Name }} 
</li>