在Angular2中的打字机 – ng切换

我正在玩角色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,NgSwitch]
})
export class ItemDetailsComponent {
    item:Item;
}

基本上这是一个简单的组件,我注入一个具有name属性的项目. name属性真的有一个值,我可以看到它的行< span>你选择了{{item.name}},< / span>工作正常.

我不知道为什么它不起作用从我的理解,一切都应该是正确的.我与github的角度回购比较,unit tests

这些是我检查的东西,我相信是的,

> NgSwitch是通过指令导入和注入的
>语法是正确的
>项目确实可用(但也许不在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>

这也不行,所以它必须是真正的基础,我做错了.我恐怕在互联网上找不到任何例子或代码片段.任何帮助将不胜感激,谢谢提前.

@H_404_22@
您需要导入NgSwitchWhen和NgSwitchDefault,将它们添加到import语句中

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...