Hai giá trị trường hợp chuyển đổi ở dạng góc

Trong php và java, chúng ta có thể làm

case 1:
case 2:
   echo "something";

để khi giá trị là 1 hoặc 2, "cái gì đó" sẽ được in trên màn hình, tôi đang xây dựng một ứng dụng góc cạnh, tôi đang làm một cái gì đó như dưới đây

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

Biểu mẫu được sử dụng cho một lựa chọn có thể được sử dụng cho nhiều lựa chọn, nhưng tôi đã thử một cái gì đó như dưới đây để làm cho nó dễ hiểu hơn

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

Thật không may, nó đã không hoạt động, bất cứ ai có thể đề xuất cách tốt hơn để làm điều này.

(Un) may mắn thay bạn không thể; những ngSwitchlà khá “ngớ ngẩn” nếu bạn nhìn vào mã nguồn: nó chỉ là một ===lệch giữa giá trị hợp và giá trị chuyển đổi. Bạn có hai lựa chọn, nhưng cả hai đều không tốt.

Tùy chọn 1 đang sử dụng chỉ thị *ngSwitchDefault, nhưng điều này sẽ chỉ hoạt động nếu tất cả các trường hợp của bạn là DẠNG 1:

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

Tùy chọn khác, khá dài dòng, đang làm một cái gì đó như thế này:

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

Bạn cũng có thể sử dụng cách sau, linh hoạt hơn rất nhiều. Sau đó, bạn có thể đặt bất kỳ thứ gì đánh giá thành boolean dưới dạng giá trị * 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>

Ưu điểm của điều này so với việc sử dụng các khối * ngIf là bạn vẫn có thể chỉ định mặc định.

Bạn có thể sử dụng ngTemplateOutletđể thực hiện điều này:

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

Đây là một biến thể kết hợp câu trả lời thứ hai của Fabio với câu trả lời của brian3kb để tạo ra một giải pháp cô đọng hơn mà không làm rối loạn ý nghĩa.

Nếu có nhiều kết quả phù hợp cho một trường hợp, nó sẽ sử dụng array.includes()thay vì so sánh từng tùy chọn riêng lẻ.

Nó đặc biệt hữu ích nếu có nhiều hơn hai trận đấu vì nó sẽ cô đọng hơn nhiều so với câu trả lời được chấp nhận.

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

Nếu các kết quả phù hợp xảy ra trong một biến, bạn có thể sử dụng array.indexOf()để tránh sử dụng toán tử bậc ba có điều kiện.

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

Giống như MoshMage đã đề xuất, tôi đã sử dụng một *ngIfđể xử lý điều này cho các thành phần xử lý một số tùy chọn:

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

Hãy thử ng-switch-when-separator="|"trongng-switch

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

Đây là cách tôi sẽ làm điều đó:

Trong của bạn .component.ts:

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

Sau đó, trong tệp mẫu của bạn, bạn có thể làm như sau:

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

Hãy để ý lỗi chính tả ...