Angular2 ngSwitch не работает

Question

У меня есть ngSwitch для атрибута модели, связанного с выпадающим списком. Он не работал, поэтому я попытался просто скорректировать значение. Все еще не работает, он отображает и divs. Что я делаю не так? Извиняюсь заранее, если это что-то очевидное, я новичок в 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> 

Результат на сервере НПМ:

Answer 1

Какую версию angular2 вы используете? В финальной (выпускной) версии синтаксис, который работает для меня, это:

<div [ngSwitch]="someVariable"> 
    <div *ngSwitchCase="value1">...</div> 
    <div *ngSwitchCase="value2">...</div> 
</div> 

Answer 2

Ваш синтаксис для использования неверен. Он должен быть [ngSwitch]="switch_expression", а затем корпуса должны выглядеть так: <some-element *ngSwitchCase="match_expression_1">

См. here, чтобы использовать его.

Answer 3

вы должны проверить на объект attributs

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

Answer 4

В случае DEMO требуется: 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'" 

Answer 5

Если переменная вы переключаетесь на обновляется по подписке, попробуйте добавить асинхронной трубку:

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

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