2015-06-09 5 views
10

Ich spiele mit eckigen 2 (derzeit mit Version alpha 26). ng-for und ng-if zum Beispiel funktionieren gut. Ich habe jedoch Probleme mit ng-switch. Ich kann es einfach nicht zum Laufen bringen, d. H. Es wird nichts gedruckt. Es scheint, als ob die gesamte Vorlage ignoriert wird.ng-switch in Angular2

Dies ist der Code aus meiner Komponente, die auch auf github gefunden werden können:

import {Item} from "js/types/item"; 
import {Component, View, NgFor, NgIf, NgSwitch} from "angular2/angular2"; 

@Component({ 
    selector: "item-details", 
    properties: [ 
     "item" 
    ] 
}) 
@View({ 
    template: `<span>You selected {{item.name}},</span> 
       <span [ng-switch]="item.name"> 
       <template [ng-switch-when]="'Bill'"> 
        <span> who is often called Billy.</span> 
       </template> 
       <template [ng-switch-when]="'Bob'"> 
        <span> who is often called Bobby.</span> 
       </template> 
       <template [ng-switch-default]"> 
        <span>who has no nickname.</span> 
       </template> 
       </span> 
       <div *ng-if="item.subItems"> 
       <h2>Sub items:</h2> 
       <ul> 
        <li *ng-for="#subItem of item.subItems">{{subItem.name}}</li> 
       </ul> 
       </div>`, 
    directives: [NgFor, NgIf, NgSwitch] 
}) 
export class ItemDetailsComponent { 
    item:Item; 
} 

Im Grunde ist es eine einfache Komponente, in denen ich ein Element zu injizieren, die eine name Eigenschaft hat. Die name Eigenschaft hat wirklich einen Wert, den ich sehen kann, wie die Linie <span>You selected {{item.name}},</span> gut funktioniert.

Ich weiß nicht, warum es nicht funktioniert. Nach meinem Verständnis sollte alles in Ordnung sein. Ich verglichen mit der Winkel Repo auf Github, die unit tests usw.

Dies sind die Dinge, die ich überprüft und ich glaube, sind ok:

  • NgSwitch importiert und über directives
  • Syntax injiziert korrekt
  • item wirklich verfügbar ist (aber vielleicht nicht im Zusammenhang mit dem NgSwitch?)

Nur wirklich sicher zu sein, ich habe auch versucht, etwas trivial wie Schablonenabtastvorrichtung (Umschalten eine hartcodierte Zeichenfolge oder eine Zahl):

<span [ng-switch]="'foo'"> 
<template [ng-switch-when]="'foo'"> 
    <span> who is often called foo.</span> 
</template> 
<template [ng-switch-when]="'bar'"> 
    <span> who is often called bar.</span> 
</template> 
</span> 

Und das funktioniert auch nicht, so dass es etwas sein muss, wirklich grundlegend, was ich falsch mache .. Ich fürchte, ich kann keine Beispiele oder Code-Schnipsel im Internet finden. Jede Hilfe würde geschätzt, danke im Voraus.

Antwort

10

Sie müssen NgSwitchWhen und NgSwitchDefault importieren, fügen Sie diese den Import-Anweisungen

+0

Große, das ist es. Vielen Dank, ich hätte das nie gefunden. Aber es macht Sinn! – PzYon

+0

wo diese importieren? –