typescript Angular2 中的 ng-switch
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30724410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-switch in Angular2
提问by PzYon
I am playing around with angular 2 (currently with version alpha 26). ng-forand ng-iffor example are working fine. I do however have problems with ng-switch. I just can't get it to work, i.e. nothing is printed. It seems as if the whole template is ignored.
我正在使用 angular 2（目前使用 alpha 26 版本）。ng-for和ng-if例如工作正常。但是，我确实遇到了ng-switch. 我只是无法让它工作，即没有打印任何内容。似乎整个模板都被忽略了。
This is the code from my component, which can also be found on github:
这是来自我的组件的代码，也可以在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;
}
Basically it's a simple component into which I inject an item which has a nameproperty. The nameproperty really has a value, which I can see as the line <span>You selected {{item.name}},</span>works fine.
基本上它是一个简单的组件，我向其中注入了一个具有name属性的项目。该name属性确实有一个值，我可以看到该行<span>You selected {{item.name}},</span>工作正常。
I don't know, why it doesn't work. From my understanding everything should be correct. I compared with the angular repo on github, the unit tests, etc.
我不知道，为什么它不起作用。根据我的理解，一切都应该是正确的。我与 github 上的 angular repo、单元测试等进行了比较。
These are the things I checked and I believe are ok:
这些是我检查过的东西，我认为没问题：
NgSwitchis imported and injected viadirectives- syntax is correct
itemreally is available (but maybe not in the context ofNgSwitch?)
NgSwitch通过导入和注入directives- 语法正确
item真的可用（但可能不在NgSwitch？）
Just to be really sure, I also tried something trivial like following template (switching over a hard-coded string or a number):
只是为了确定，我还尝试了一些简单的事情，例如以下模板（切换硬编码字符串或数字）：
<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>
And this doesn't work either, so it must be something really basic which I am doing wrong.. I'm afraid I can't find any examples or code snippets on the internet. Any help would be appreciated, thanks in advance.
这也不起作用，所以它一定是我做错的非常基本的东西..恐怕我在互联网上找不到任何示例或代码片段。任何帮助将不胜感激，提前致谢。
采纳答案by unobf
You need to import NgSwitchWhenand NgSwitchDefault, add these to the import statements
您需要导入NgSwitchWhen和NgSwitchDefault，将这些添加到导入语句中
