angular - 如何绑定(bind)到 '*ngSwitchCase'

Question

我想在从服务器检索数据时动态显示数据......所以我需要绑定(bind)到*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 只接受字符串，有什么想法可以克服这样做吗？

像我一样动态增加值(value)是一个好习惯吗value="{{thisYearNumber}}"？

Answer 1

结构指令已经将您置于正确的上下文中来访问组件变量。

如果你这样做:

*ngSwitchCase="thisYearString"

将从 thisYearString 获取值在您的组件中为开关盒定义。另外，我已经能够打开非字符串(毕竟它是Javascript)，所以我猜它只是在进行检查之前强制它。

您的示例中需要引号的原因:

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

围绕2017是因为否则它会尝试将其视为变量，并且会失败。