typescript - ng-switch i Angular2

Jeg leker med Angular 2 (for øyeblikket med versjon alpha 26). ng-for og ng-if fungerer for eksempel fint. Jeg har derimot problemer med ng-switch. Jeg får det bare ikke til å fungere, det vil si at ingenting blir skrevet ut. Det virker som om hele malen blir ignorert.

Dette er koden fra komponenten min, som også kan finnes 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;
}

Basisk sett er det en enkel komponent hvor jeg setter inn et element som har en name-egenskap. name-egenskapen har faktisk en verdi, som jeg kan se når linjen <span>You selected {{item.name}},</span> fungerer fint.

Jeg vet ikke hvorfor det ikke fungerer. Etter min forståelse burde alt være korrekt. Jeg sammenlignet med Angular-repositoriet på GitHub, enhetstestene, osv.

Dette er tingene jeg sjekket og som jeg tror er ok:

  • NgSwitch importeres og injiseres via directives
  • syntaksen er korrekt
  • item er virkelig tilgjengelig (men kanskje ikke i konteksten av NgSwitch?)

Bare for å være helt sikker, prøvde jeg også noe trivielt som å følge malen (ved å bytte over en hardkodet streng eller et tall):

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

Og dette fungerer heller ikke, så det må være noe veldig grunnleggende som jeg gjør feil. Jeg er redd jeg ikke kan finne noen eksempler eller kodebiter på internett. All hjelp vil bli satt pris på, takk på forhånd.

Svar #1

Du må importere NgSwitchWhen og NgSwitchDefault, legg disse til i importsetningene

Relaterte artikler