Angular2 中的 ng-switched

Question

我正在玩 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、unit tests 等

这些是我检查过的，我认为没问题：

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>

这也不起作用，所以它一定是我做错的非常基本的东西。恐怕我在互联网上找不到任何示例或代码片段。任何帮助将不胜感激，提前致谢。

Answer 1

您需要导入 NgSwitchWhen 和 NgSwitchDefault，将它们添加到导入语句中

Angular2 中的 ng-switched

ng-switch in Angular2

typescript

angular

ng-switch