- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试将 ngSwitch 用作 in this example但我得到一个错误:
我的组件:
template: `
<div layout="column" layout-align="center center">
<div [ng-switch]="value">
<div *ng-switch-when="'init'">
<button md-raised-button class="md-raised md-primary">User</button>
<button md-raised-button class="md-raised md-primary">Non user</button>
</div>
<div *ng-switch-when="0">Second template</div>
<div *ng-switch-when="1">Third Template</div>
</div>
</div>`,
directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]
})
My plunker - 向导.ts
我错过了什么?谢谢
最佳答案
老办法
将 ng-switch 更改为 ngSwitch
将 ng-switch-when 更改为 ngSwitchWhen
<div layout="column" layout-align="center center">
<div [ngSwitch]="value">
<div *ngSwitchWhen="'init'">
<button md-raised-button class="md-raised md-primary">User</button>
<button md-raised-button class="md-raised md-primary">Non user</button>
</div>
<div *ngSwitchWhen="0">Second template</div>
<div *ngSwitchWhen="1">Third Template</div>
</div>
</div>
<button md-fab
class="md-fab wizard_button--next"
aria-label="about"
(click)="onNext()">
<i class="material-icons" md-icon="">play_arrow</i>
</button>
ANGULAR.2.0.0 或 Final Release
请注意最终版本中的内容有所更改,因此如果您使用的是最终版本,请阅读以下简单示例。
简单演示:http://plnkr.co/edit/IXmUm2Th5QGIRmTFBtQG?p=preview
@Component({
selector: 'my-app',
template: `
<button (click)="value=1">select - 1</button>
<button (click)="value=2">select - 2</button>
<button (click)="value=3">select - 3</button>
<h5>You selected : {{value}}</h5>
<hr>
<div [ngSwitch]="value">
<div *ngSwitchCase="1">1. Template - <b>{{value}}</b> </div>
<div *ngSwitchCase="2">2. Template - <b>{{value}}</b> </div>
<div *ngSwitchCase="3">3. Template - <b>{{value}}</b> </div>
<div *ngSwitchDefault>Default Template</div>
</div>
`,
})
export class AppComponent {}
关于angular - ngSwitch 在 Angular2 中如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35777062/
这是我的 html: {{getData(data, col.data, col.dataName)}}
我有一个 NgSwitch 模板。在 NgSwitch 中,我想获得对初始化模板的模板引用。像这样: 当单击组件中的按钮时,我
我有一个 ngSwitch 用于绑定(bind)到下拉列表的模型属性。它不起作用,所以我尝试简单地对值进行硬编码。仍然不起作用,它显示两个 div。我究竟做错了什么?如果这很明显,请提前致歉,我是 A
我试图让 ngSwitch 动态显示和隐藏组件,但 ngSwitch 似乎不起作用。 我用这个 plunker 创建了这个问题的简化版本 这是组件 Html: Rendered
我有这个代码: app-map 包含谷歌地图,每次我切换到此选项卡时都会从 beginig 加载它。我怎样才能在这里关闭延迟加载,该 map 将被加载一次? 最佳答案 您可以使用
我有带有 IF 语句的模板: 如何使用 ngSwitch 指令编写此模板? 例如,此模板存在解析错误“嵌入式模板上的组件”: 此模板存在解析错误“No provider for N
如何在 ngSwitch 中拥有一些公共(public)节点? Test Lorem ipsum Lorem ipsum common footer
我有三个按钮显示三个不同的列表,所以我想添加 enum 来帮助我决定使用 ngSwitch 显示哪个列表,但我得到了一个错误。 这是 typescript : export enum ListType
我正在编写一个列出一些用户并在单击用户时显示信息页面的应用程序。用户类型不同(约 20 种),详细信息页面在布局和功能上因用户类型而异。 我有一个主 DetailsComponent 和 20 个必须
ngSwitch 和 ngInclude 有什么区别? 我真的需要了解其中的区别,这样我才能继续我的项目。 ngSwitch 是否仅隐藏 dom 元素? 最佳答案 您可能会发现 v1.1.4 文档更有
我想根据数值范围使用 ngSwitch。 我想根据 ngSwitch 更改显示三个不同的文本。但是,当我尝试在 ng-switch-when 中设置值范围时,我无法完成这项工作。这是可能的还是我应该使
我不确定我在这里做什么。我在 ngFor 中有这个 ngSwitch
有以下代码片段: 我希望在 ngSwitch 指令执行操作之前构建组件 myHeader 。现在 component1 是在 myHeade
由于某种原因,我在使用 ng-switch 时遇到问题,即使更新模型, View 也不会切换。它始终显示默认 View (仅用于测试),一切都应该在完整的 html 中正常工作,如此处测试的 http
我在使用 $scope.$watch 时遇到问题关于我项目范围内的一些 Angular 变量。我做了一个样本jsfiddle来说明问题。 基本上我可以$scope.$watch ng-switch 内
ngIf 之间有什么实际区别和ngSwitch?这两个指令都操作 DOM,但 ngSwitch 更详细。典型情况是只使用 ngIf ,除非您需要非常大的东西,在这种情况下使用 ngSwitch ? 是
我试图同时使用 Angular ng-switch 和 ng-if 指令,但它似乎不起作用。我当时做的是: 我只是想知道这是否可能,或者是否有其他方法可以根据 $scope 中的某
当我使用 时在我的 html 中的 ngSwitch 内的标签,整个事情都坏了。 错误:[$compile:ctreq] 找不到指令“ngSwitchWhen”所需的 Controller “ngS
我的组件中有一段 HTML: Mode 1 Activated Mode 2 Activated 我想通过 karma-jasmine 测试它。我可以得到根元素 const hea
我知道这是一个范围问题,但我似乎无法弄清楚。我想简单地通过按一个按钮将一个 div 更改为另一个 div。换句话说,ng-click 将执行必要的更改以激活 ng-switch。 但是,我的按钮都嵌套
我是一名优秀的程序员,十分优秀!