NG-开关Angular2 [英] ng-switch in Angular2

问题描述

我玩弄2角（目前版本阿尔法26）。 NG-对和 NG-如果例如工作正常。然而，我与 NG-开关的问题。我只是无法得到它的工作，打印即什么都没有。看来，如果整个模板会被忽略。

I am playing around with angular 2 (currently with version alpha 26). ng-for and ng-if for 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.

这是从我的组成部分，这也可以在 github上发现code：

This is the code from my component, which can also be found on 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;
}

基本上这是一个简单的组件到我注入其中有一个名称属性的项目。在名称属性真的有一个价值，这是我能看到的行＆LT;跨度＆gt;您选择了{{item.name}}＆LT; / SPAN方式＆gt; 正常工作

Basically it's a simple component into which I inject an item which has a name property. The name property really has a value, which I can see as the line <span>You selected {{item.name}},</span> works fine.

我不知道，为什么它不工作。从我的理解一切都应该是正确的。我在GitHub上的<一个角回购相比， href=\"https://github.com/angular/angular/blob/master/modules/angular2/test/directives/ng_switch_spec.ts\">unit测试的，等等。

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.

这是我查的事情，我相信都ok：

These are the things I checked and I believe are ok:

• NgSwitch 通过指令导入并注入


• 语法是否正确


• 项目真的是可用的（但也许不是在 NgSwitch 的背景下？）

• NgSwitch is imported and injected via directives
• syntax is correct
• item really is available (but maybe not in the context of NgSwitch?)

只是要真正确定，我也尝试过一些小事类似下面的模板（切换一个硬codeD字符串或数字）：

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>

这也不管用，所以它必须是真正的东西基本是我做错了..我怕我不能在互联网上找到任何实例或code片段。任何帮助将是AP preciated，先谢谢了。

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.

推荐答案

您需要导入 NgSwitchWhen 和 NgSwitchDefault 这些添加到import语句

You need to import NgSwitchWhen and NgSwitchDefault, add these to the import statements

这篇关于NG-开关Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！