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只接受字符串任何想要克服的想法吗？

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

Answer 1

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

如果你这样做：

*ngSwitchCase="thisYearString"

这将获得组件中为切换案例定义的thisYearString的值。此外，我已经能够打开非字符串（毕竟它是Javascript）所以我猜测它只是在它进行检查之前强制它。

您在此示例中需要引号的原因：

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

在2017附近是因为否则会尝试将其视为变量，并且会失败。

如何绑定到'* ngSwitchCase'

1 个答案: