typescript - ng-switch i Angular2

Jag leker med Angular 2 (för närvarande med version alpha 26). ng-for och ng-if fungerar till exempel bra. Jag har däremot problem med ng-switch. Jag kan helt enkelt inte få det att fungera, det vill säga ingenting skrivs ut. Det verkar som om hela mallen ignoreras.

Det här är koden från min komponent, som också finns på GitHub:

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;
}

I princip är det en enkel komponent där jag injicerar ett objekt som har en name-egenskap. name-egenskapen har verkligen ett värde, vilket jag kan se eftersom raden <span>You selected {{item.name}},</span> fungerar bra.

Jag vet inte varför det inte fungerar. Enligt min förståelse borde allt vara korrekt. Jag jämförde med Angular-repot på GitHub, enhetstesterna, osv.

Det här är sakerna jag har kontrollerat och som jag tror är okej:

  • NgSwitch importeras och injiceras via directives
  • syntaxen är korrekt
  • item är verkligen tillgänglig (men kanske inte i kontexten av NgSwitch?)

Bara för att vara riktigt säker, försökte jag också något trivialt som att följa mallen (växla över en hårdkodad sträng eller ett nummer):

<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>

Och detta fungerar inte heller, så det måste vara något riktigt grundläggande som jag gör fel.. Jag är rädd att jag inte kan hitta några exempel eller kodsnuttar på internet. All hjälp skulle uppskattas, tack på förhand.

Svar #1

Du behöver importera NgSwitchWhen och NgSwitchDefault, lägg till dessa i importuttrycken

Relaterade artiklar