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 に答える