在Angular2中的打字机 – ng切换

前端之家收集整理的这篇文章主要介绍了在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>

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

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

猜你在找的Angularjs相关文章