Angular2 ngSwitch 不工作
Angular2 ngSwitch not working
我有一个绑定到 drop-down 的模型属性的 ngSwitch。它没有用,所以我尝试简单地 hard-code 该值。仍然不起作用,它显示 both 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 服务器上的结果:
您使用的是哪个版本的angular2?在最终(发布)版本中,适用于我的语法是:
<div [ngSwitch]="someVariable">
<div *ngSwitchCase="value1">...</div>
<div *ngSwitchCase="value2">...</div>
</div>
您使用的语法不正确。它应该是 [ngSwitch]="switch_expression"
然后案例应该是这样的 <some-element *ngSwitchCase="match_expression_1">
有关使用方法,请参阅 here。
你必须测试对象属性
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
如果需要演示:https://plnkr.co/edit/SCZC5Cx9gnQbg1AkkspX?p=preview
改变,
1)
ngSwitch="ACTV" TO [ngSwitch]="'ACTV'"
2)
ngSwitchWhen="CLSD" TO *ngSwitchCase="'CLSD'"
3)
ngSwitchWhen="ACTV" To *ngSwitchCase="'ACTV'"
如果您打开的变量通过订阅得到更新,请尝试添加异步管道:
<div [ngSwitch]="someVariable" | async>
https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html
我有一个绑定到 drop-down 的模型属性的 ngSwitch。它没有用,所以我尝试简单地 hard-code 该值。仍然不起作用,它显示 both 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 服务器上的结果:
您使用的是哪个版本的angular2?在最终(发布)版本中,适用于我的语法是:
<div [ngSwitch]="someVariable">
<div *ngSwitchCase="value1">...</div>
<div *ngSwitchCase="value2">...</div>
</div>
您使用的语法不正确。它应该是 [ngSwitch]="switch_expression"
然后案例应该是这样的 <some-element *ngSwitchCase="match_expression_1">
有关使用方法,请参阅 here。
你必须测试对象属性
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
如果需要演示:https://plnkr.co/edit/SCZC5Cx9gnQbg1AkkspX?p=preview
改变,
1)
ngSwitch="ACTV" TO [ngSwitch]="'ACTV'"
2)
ngSwitchWhen="CLSD" TO *ngSwitchCase="'CLSD'"
3)
ngSwitchWhen="ACTV" To *ngSwitchCase="'ACTV'"
如果您打开的变量通过订阅得到更新,请尝试添加异步管道:
<div [ngSwitch]="someVariable" | async>
https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html