Question

在php和java中我们可以做到

case 1:
case 2:
   echo "something";

这样，当值为1或2时，＆＃34;某事物＆＃34;将打印在屏幕上，我正在构建一个角度应用程序，我正在做类似下面的

<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

与建议的MoshMage一样，我最终使用*ngIf来处理处理多个选项的组件：

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

Answer 4

这是一个将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 5

您可以使用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 6

请尝试ng-switch-when-separator="|"中的ng-switch

<div ng-switch="temp">
    <div ng-switch-when="1|2" ng-switch-when-separator="|"> echo "something"</div>
</div>

Answer 7

这是我要怎么做：

在您的.component.ts中：

getFormType(type: string) {
  switch(type) {
    case 'singe-choice':
    case 'multi-choice':
      return 'singe-choice|multi-choice'
    default:
      return type;
  }
}

然后，您可以在模板文件中执行以下操作：

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

请注意打字错误...

Answer 8

可以使用 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 9

使用text = "click()" script = "your script" def convert(script, text): new_script = script.replace(text, "what u want") return new_script：

ngFor

angular2中的两个开关盒值

9 个答案: