angular2中的两个开关盒值

Question

在php和java中我们可以做到

case 1:
case 2:
   echo "something";

这样,当值为1或2时,"某事"将被打印在屏幕上,我正在构建一个角度应用程序,我正在做类似下面的事情

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

用于单一选择的表单可用于多种选择,但我尝试了类似下面的内容,使其更具有组织性

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

我的运气不好,没有用,任何人都可以建议更好的方法来做到这一点.

Answer 1

(联合国)幸运的是你不能,ngSwitch如果你看一下源代码,它就会非常"愚蠢",它只是===在案例值和开关值之间.你有两种选择,但两者都不是很好.

选项1正在使用该指令*ngSwitchDefault,但这只有在您的所有多个案例都是FORM 1时才有效:

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

另一个相当冗长的选项就是做这样的事情:

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

Answer 2

您还可以使用以下内容,这样更灵活.然后,您可以将评估为boolean的任何内容作为*ngSwitchCase值.

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

这比使用*ngIf块的优点是您仍然可以指定默认值.

Answer 3

您可以使用ngTemplateOutlet实现此功能

<ng-container [ngSwitch]="variable">
   <ng-container *ngSwitchCase="1">
      <ng-container *ngTemplateOutlet="firstAndSecond"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="2">
      <ng-container *ngTemplateOutlet="firstAndSecond"></ng-container>
   </ng-container>
   <ng-container *ngSwitchCase="3">
      some html
   </ng-container>
   <ng-container *ngSwitchDefault>
      another html
   </ng-container>
   <ng-template #firstAndSecond>
      html
   </ng-template>
</ng-container>

Answer 4

就像MoshMage建议的那样,我最终使用了一个*ngIf来处理这个处理几个选项的组件:

 *ngIf="['Transformation', 'Field Mapping', 'Filter'].includes(selectedWorkflow.type)"

Answer 5

这是一个将Fabio的第二个答案与brian3kb相结合的变体,以产生一个更加简洁的解决方案而不会混淆意义.

如果它使用的案例有多个匹配项,array.includes()而不是单独比较每个选项.

如果有两个以上的匹配则特别有用,因为它相对于接受的答案会更加精确.

<div [ngSwitch]="data.type">
    <div *ngSwitchCase="['multi-choice', 'singe-choice'].includes(data.type) ? data.type : ''">FORM 1</div>
    <div *ngSwitchCase="'range'">FORM 2</div>
    <div *ngSwitchDefault>FORM 3</div>
</div>

如果匹配碰巧在变量中,则可以使用array.indexOf()以避免使用条件三元运算符.

<div [ngSwitch]="data.type">
    <div *ngSwitchCase="matches[matches.indexOf(data.type)]">FORM 1</div>
    <!-- ... -->
</div>

Answer 6

可以使用ngTemplateOutlet指令来实现：

<ng-container [ngSwitch]="colour">
    <ng-container *ngSwitchCase="'green'">:)</ng-container>
    <ng-container *ngSwitchCase="'yellow'">;)</ng-container>
    <ng-container *ngSwitchCase="'black'" [ngTemplateOutlet]="sad"></ng-container>
    <ng-container *ngSwitchCase="'darkgrey'" [ngTemplateOutlet]="sad"></ng-container>
</ng-container>

<ng-template #sad>:(</ng-template>

Answer 7

使用ngFor：

<ng-container [ngSwitch]="column">
  <ng-container *ngFor="let numeric of ['case1', 'case2']">
    <ng-container *ngSwitchCase="numeric">
      {{ element[column] | currency }}
    </ng-container>
  </ng-container>
</ng-container>