ค่าเคสสลับสองค่าเป็นเชิงมุม

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

โชคร้ายของฉันมันไม่ได้ผลใครช่วยแนะนำวิธีที่ดีกว่านี้ให้หน่อย

(Un) โชคดีที่คุณทำไม่ได้ ngSwitchค่อนข้าง“โง่” ถ้าคุณดูรหัสที่มา: มันเป็นเพียง===ระหว่างมูลค่ากรณีและค่าสวิทช์ คุณมีทางเลือกสองทาง แต่ทั้งคู่ยังห่างไกลกันมาก

ตัวเลือกที่ 1 กำลังใช้คำสั่ง*ngSwitchDefaultแต่จะใช้ได้ก็ต่อเมื่อหลายกรณีของคุณเป็นแบบฟอร์ม 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>

คุณยังสามารถใช้สิ่งต่อไปนี้ซึ่งยืดหยุ่นกว่ามาก จากนั้นคุณสามารถใส่อะไรก็ได้ที่ประเมินเป็นบูลีนเป็นค่า * 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 คือคุณยังสามารถระบุค่าเริ่มต้นได้

คุณสามารถใช้ngTemplateOutletเพื่อใช้สิ่งนี้:

<ng-container [ngSwitch]="variable">
    <ng-container *ngSwitchCase="1">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="2">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
    <ng-template #form1>FORM 1</ng-template>
</ng-container>

อัปเดต

ในขณะที่ยังคงเชิงมุมพิจารณาจากคุณสมบัติดังกล่าวมี jonrimmer ของสวิทช์ cases.directive.ts ตัวอย่างการใช้งาน:

<ng-container [ngSwitch]="variable">
    <ng-container *jrSwitchCases="[1, 2]">FORM 1</ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
</ng-container>

นี่คือรูปแบบที่รวมคำตอบที่สองของ 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>

เช่นเดียวกับที่MoshMageแนะนำฉันลงเอยด้วยการใช้*ngIfเพื่อจัดการสิ่งนี้สำหรับส่วนประกอบที่จัดการตัวเลือกต่างๆ:

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

โปรดลองng-switch-when-separator="|"เข้ามาng-switch

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

นี่คือวิธีที่ฉันจะทำ:

ในไฟล์ .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>

ระวังการพิมพ์ผิด ...