如何绑定到"* ngSwitchCase"

问题描述

我想在从服务器检索数据时动态显示数据...所以我需要绑定到 * ngSwitchCase

I want to display data dynamically as I retrieve it from the server ... so I need to bind to *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只接受字符串有什么想法可以克服吗?

PS: I use String and Number since ngSwitchCase only accepts strings any ideas to overcome doing that too?

像我 value ="{{thisthisearNumber}}" 一样动态添加价值是一种好习惯吗?

is it a good practice to add value dynamically like I did value="{{thisYearNumber}}"?

推荐答案

结构化指令已经使您处于正确的上下文中，可以访问组件变量.

The structural directive already puts you in the right context to access your component variables.

如果您这样做:

*ngSwitchCase="thisYearString"

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

That will get the value from thisYearString defined in your component for the switch case. Also, I've been able to switch on non-strings (it is Javascript, after all) so I'm guessing it just coerces it before it does the check.

在此处的示例中需要引号的原因:

The reason you need quotes in your example here:

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

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

Around the 2017 is because otherwise it would try to treat that as a variable, and would fail.

这篇关于如何绑定到"* ngSwitchCase"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！