我有一个ngSwitch,用于绑定到下拉列表的模型属性。它没有用,所以我试着简单地对这个值进行硬编码。仍然不起作用,它显示两个 div。我究竟做错了什么?如果它显而易见,请提前道歉,我是Angular2的新手。
我的html模板:
<!-- display closed date if status is closed, otherwise display active date -->
<div ngSwitch="ACTV">
<div class="form-group row" ngSwitchWhen="CLSD">
<label for="closeDt" class="col-md-4 form-control-label text-md-right">
Close Date
<span class="help-block">Required field</span>
</label>
<div class="col-md-4 col-xs-12">
<datetime [timepicker]="false" [(ngModel)]="date2" id="close-date" name="close-date"></datetime>
</div>
</div>
<div class="form-group row" ngSwitchWhen="ACTV">
<label for="issueDt" class="col-md-4 form-control-label text-md-right">
Active Date
<span class="help-block">Required field</span>
</label>
<div class="col-md-4 col-xs-12">
<datetime [timepicker]="false" [(ngModel)]="date2" id="active-date" name="active-date"></datetime>
</div>
</div>
</div>
npm服务器上的结果:
答案 0 :(得分:14)
如果需要DEMO:https://plnkr.co/edit/SCZC5Cx9gnQbg1AkkspX?p=preview
更改,
<强> 1)强>
let table =
Seq.zip ['A'..'Z'] (Seq.initInfinite((+) 1))
|> Map.ofSeq
let calc (input : string) =
let s = input.ToUpper()
match s with
| _ when Seq.forall System.Char.IsLetter s ->
Some (Seq.sumBy (fun c -> table.[c]) s)
| _ -> None
2)
ngSwitch="ACTV" TO [ngSwitch]="'ACTV'"
第3)强>
ngSwitchWhen="CLSD" TO *ngSwitchCase="'CLSD'"
答案 1 :(得分:3)
您使用的是什么版本的angular2?在最终(发布)版本中,适用于我的语法是:
<div [ngSwitch]="someVariable">
<div *ngSwitchCase="value1">...</div>
<div *ngSwitchCase="value2">...</div>
</div>
答案 2 :(得分:2)
您使用的语法不正确。它应为[ngSwitch]="switch_expression"
,然后案例应如下<some-element *ngSwitchCase="match_expression_1">
请参阅here了解如何使用它。
答案 3 :(得分:0)
你必须在对象属性上进行测试
switch_expression {
match_expression_1: value1,
match_expression_2: value2,
match_expression_3: value3,
}
然后:
<div [ngSwitch]="switch_expression">
<div *ngSwitchCase="match_expression_1">...</div>
<div *ngSwitchCase="match_expression_2">...</div>
</div>
获取更多信息: https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html
答案 4 :(得分:0)
如果要打开的变量通过订阅进行更新,请尝试添加异步管道:
<div [ngSwitch]="someVariable" | async>
https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html