两个开关盒角度值 [英] Two switch case values in angular

问题描述

在php和java中，我们可以做到

In php and java we can do

case 1:
case 2:
   echo "something";

所以当值是1或2时，"something"将显示在屏幕上，我正在构建一个有角度的应用程序，我正在做类似以下的事情

so that when the value is 1 or 2 "something" will be printed on the screen, i am building an angular application i am doing something like the below

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice'">FORM 1</div>
  <div *ngSwitchCase="'singe-choice'">FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

用于单选的表单可以用于多选，但是我尝试了以下类似的方法使它更具组织性

The form which is used for single choice can be used for mutiple choice , but i tried something like below to make it more organisable

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice' || 'singe-choice'">FORM 1</div>
</div>

我的运气不好，没有人能建议这样做的更好方法.

My bad luck it didnt work, can anyone suggest the better way to do this.

推荐答案

(Un)很遗憾，您不能；如果您查看源代码，则ngSwitch相当笨拙":它只是大小写值和开关值之间的===.您有两种选择，但两者都不尽相同.

(Un)fortunately you can‘t; the ngSwitch is quite "dumb" if you look at the source code: it‘s just a === between the case value and the switch value. You have two options, but both of them are far from great.

选项1使用指令*ngSwitchDefault，但这仅在所有多种情况都为FORM 1的情况下才起作用:

Option 1 is using the directive *ngSwitchDefault, but this will only work if all your multiple cases are FORM 1:

<div [ngSwitch]="data.type">
  <div *ngSwitchDefault>FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

另一个很冗长的选择是做这样的事情:

The other option, which is quite verbose, is doing something like this:

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="data.type === 'multi-choice' || data.type === 'singe-choice' ? data.type : '' ">FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

这篇关于两个开关盒角度值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！