Ng-switch в Angular2

Я играю с angular 2 (в настоящее время с версией alpha 26). ng-for и ng-if, например, работают нормально. Однако у меня есть проблемы с ng-switch. Я просто не могу заставить его работать, т.е. Ничего не печатается. Кажется, что весь шаблон игнорируется.

Это код моего компонента, который также можно найти на 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;
}

В основном это простой компонент, в который я вставляю элемент с свойством name. Свойство name действительно имеет значение, которое я вижу, поскольку строка <span>You selected {{item.name}},</span> работает нормально.

Я не знаю, почему это не работает. Из моего понимания все должно быть правильно. Я сравнил с репо angular на github, модульные тесты и т.д.

Это то, что я проверил, и я считаю, что это нормально:

  • NgSwitch импортируется и вводится через directives Синтаксис
  • верен.
  • item действительно доступен (но, возможно, не в контексте NgSwitch?)

Чтобы быть действительно уверенным, я также попробовал что-то тривиальное, как следующий шаблон (переключение жестко запрограммированной строки или числа):

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

И это тоже не работает, поэтому должно быть что-то действительно основное, что я делаю неправильно. Боюсь, я не могу найти примеры или фрагменты кода в Интернете. Любая помощь была бы оценена, спасибо заранее.

Ответ 1

Вам нужно импортировать NgSwitchWhen и NgSwitchDefault, добавить их в операторы импорта