6

我有一个绑定到下拉列表的模型属性的 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 服务器上的结果：

在此处输入图像描述

4

5 回答 5

21

如果需要演示：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'"
于 2016-10-21T15:28:58.450 回答
5

您使用的是哪个版本的 angular2？在最终（发布）版本中，适用于我的语法是：

<div [ngSwitch]="someVariable">
  <div *ngSwitchCase="value1">...</div>
  <div *ngSwitchCase="value2">...</div>
</div>
于 2016-10-21T15:25:15.353 回答
2

您使用的语法不正确。应该是这样[ngSwitch]="switch_expression"，然后案例应该是这样的<some-element *ngSwitchCase="match_expression_1">

请参阅此处了解如何使用它。

于 2016-10-21T15:25:18.590 回答
1

你必须测试对象属性

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

于 2016-10-21T15:28:13.523 回答
0

如果您打开的变量通过订阅更新，请尝试添加异步管道：

<div [ngSwitch]="someVariable" | async>

https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

于 2017-01-26T19:49:52.073 回答