2015-06-09 20 views
10

Gram z kątem 2 (obecnie z wersją alpha 26). Na przykład ng-for i ng-if działają poprawnie. Mam jednak problemy z ng-switch. Po prostu nie mogę go uruchomić, tzn. Nic nie jest drukowane. Wygląda na to, że cały szablon jest ignorowany.ng-switch w Angular2

Jest to kod z mojego składnik, który można również znaleźć na 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; 
} 

Zasadniczo jest to prosty komponent, do którego ja wprowadzić element, który ma właściwość name. Właściwość name ma naprawdę wartość, którą widzę jako linię <span>You selected {{item.name}},</span> działa dobrze.

Nie wiem, dlaczego to nie działa. Z mojego rozumienia wszystko powinno być poprawne. I w porównaniu z kątową repo na github, The unit tests itp

Są rzeczy sprawdzonych i wierzę, że są w porządku:

  • NgSwitch jest importowany i wstrzykuje poprzez directives
  • składnia jest poprawna
  • item naprawdę jest dostępny (ale może nie w kontekście NgSwitch?)

Wystarczy być pewien, próbowałem też coś trywialnego jak następujący szablon (przełączanie zakodowane ciąg lub numer):

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

I to nie działa albo, więc to musi być coś naprawdę podstawowe, co robię źle ... Obawiam się, że nie mogę znaleźć przykładów ani fragmentów kodu w Internecie. Każda pomoc będzie doceniona, z góry dzięki.

Odpowiedz

10

trzeba importować NgSwitchWhen i NgSwitchDefault, dodać je do sprawozdania przywozowych

+0

wielki, to jest to. Wielkie dzięki, nigdy bym tego nie znalazł ... Ale ma to sens! – PzYon

+0

gdzie je importować? –