にバインドする方法「* ngSwitchCase」

Question

私は、私は*ngSwitchCase

私のコードにバインドする必要があります...私はそれをサーバーから取得して動的にデータを表示したい

<div class="main-content"> 
 
    <div class="segments-container" padding> 
 
     <ion-segment [(ngModel)]="thisYearString" class="segments"> 
 
     <ion-segment-button value="{{thisYearNumber}}"> 
 
      {{thisYearNumber}} 
 
     </ion-segment-button> 
 
     <ion-segment-button value="{{lastYearNumber}}"> 
 
      {{lastYearNumber}} 
 
     </ion-segment-button> 
 
     </ion-segment> 
 
    </div> 
 
    <div [ngSwitch]="thisYearString"> 
 
     <ion-card *ngSwitchCase="'2017'" class="details-segment"> 
 
     <ion-card-header>2017</ion-card-header> 
 
     <!--Some Other Code--> 
 
     </ion-card> 
 
     <ion-card *ngSwitchCase="'2016'" class="details-segment"> 
 
     <ion-card-header>2016</ion-card-header> 
 
     <!--Some Other Code--> 
 
     </ion-card> 
 
    </div> 
 
    </div>

*ngSwitchCase="{{thisYearString}}"

：私がやりたいこと

はそのような何かであります

PS：ngSwitchCaseはこれを克服するために文字列を受け入れるだけなので、StringとNumberを使用しますか？

value="{{thisYearNumber}}"のように動的に値を追加するのは良い方法ですか？

Answer 1

構造ディレクティブは、コンポーネント変数にアクセスするための適切なコンテキストにすでに置きます。

あなたがこれを行う場合は、次のスイッチケースのためのコンポーネントで定義されたthisYearStringから値を取得します

`*ngSwitchCase="thisYearString" 

。また、私はそれがチェックを行う前にそれを強制的に推測しているので、非文字列（それはすべての後に、JavaScriptです）を切り替えることができました。

あなたがここにあなたの例では引用符が必要な理由：それ以外の場合は、変数として、そして失敗することを治療しようとするので、2017アラウンド

<ion-card *ngSwitchCase="'2017'" class="details-segment">

です。