Angular2中的ng-switch

时间:2015-06-09 06:24:05

标签: typescript angular ng-switch

我正在玩角度2(目前版本为alpha 26)。例如,ng-forng-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>行正常工作。

我不知道,为什么它不起作用。从我的理解,一切都应该是正确的。我比较了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>

这也不起作用,所以它必须是一些非常基本的东西,我做错了。我担心我无法在互联网上找到任何示例或代码片段。任何帮助将不胜感激,提前谢谢。

1 个答案:

答案 0 :(得分:11)

您需要导入$('#select').load("../something.php", function (respond, fstatus, xhr) { if (fstatus === "success") { if (status !== "missing") { $('#status').prop("selectedIndex", 3); } } else { alert("Load data " + fstatus + "\n" + xhr.status + " " + xhr.statusText); } }); NgSwitchWhen,将这些内容添加到导入语句