Wie binden ‚* ngSwitchCase‘

Question

Ich möchte dynamisch Daten anzuzeigen, wie ich es vom Server abrufen ... also muss ich

<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>

zu *ngSwitchCase

Mein Code binden

Was ich will, ist so etwas tun:

*ngSwitchCase="{{thisYearString}}"

PS: Ich benutze String und Number, da ngSwitchCase nur Strings akzeptiert irgendwelche Ideen, um das zu tun?

ist es eine gute Praxis, Wert dynamisch hinzuzufügen, wie ich value="{{thisYearNumber}}"?

Answer 1

Die Strukturanweisung bringt Sie bereits in den richtigen Kontext, um auf Ihre Komponentenvariablen zuzugreifen.

Wenn Sie dies tun:

`*ngSwitchCase="thisYearString" 

, dass der Wert von thisYearString in Ihrer Komponente für das Schaltergehäuse definiert wird erhalten. Ich konnte auch Nicht-Strings einschalten (es ist immerhin Javascript), also vermute ich, dass es nur nötig ist, bevor es überprüft wird.

Der Grund, warum Sie Anführungszeichen in Ihrem Beispiel brauchen hier:

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

Rund um die 2017 ist, weil sonst würde es versuchen, als eine Variable zu behandeln, dass, und scheitern würde.