Açısal olarak iki anahtar durumu değeri

Php ve java'da yapabiliriz

case 1:
case 2:
   echo "something";

böylece değer 1 veya 2 olduğunda ekrana "bir şey" yazdırılacak, açısal bir uygulama oluşturuyorum aşağıdaki gibi bir şey yapıyorum

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

Tek seçim için kullanılan form çoklu seçim için kullanılabilir, ancak daha düzenli hale getirmek için aşağıdaki gibi bir şey denedim

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

Kötü şansım işe yaramadı, kimse bunu yapmanın daha iyi bir yolunu önerebilir mi?

(Un) Neyse ki yapamazsınız; ngSwitchKaynak kodu bakarsak oldukça “aptal” dir: bu sadece bir var ===vaka değeri ve anahtar değer arasında. İki seçeneğiniz var, ancak ikisi de harika olmaktan uzak.

Seçenek 1 yönergeyi kullanmaktır *ngSwitchDefault, ancak bu yalnızca birden çok vakanızın tümü FORM 1 ise işe yarar:

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

Oldukça ayrıntılı olan diğer seçenek ise şöyle bir şey yapmak:

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

Çok daha esnek olan aşağıdakileri de kullanabilirsiniz. Daha sonra, * ngSwitchCase değeri olarak boole olarak değerlendirilen her şeyi koyabilirsiniz.

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

Bunun * ngIf bloklarını kullanmaya göre avantajı, yine de bir varsayılan belirleyebilmenizdir.

Bunu uygulamak için kullanabilirsiniz 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>

Güncelleme

Eğik hala ederken dikkate böyle bir özelliği, en jonrimmer var anahtar-cases.directive.ts . Kullanım örneği:

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

İşte anlamı şaşırtmadan daha yoğun bir çözüm üretmek için Fabio'nun ikinci cevabını brian3kb ile birleştiren bir varyasyon.

Bir servis talebi için birden fazla eşleşme varsa, array.includes()her seçeneği ayrı ayrı karşılaştırmak yerine kullanır .

Kabul edilen cevaba göre çok daha yoğun olacağından ikiden fazla eşleşme varsa özellikle yararlıdır.

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

Eşleşmeler bir değişkendeyse, array.indexOf()koşullu üçlü operatörün kullanımından kaçınmak için kullanabilirsiniz.

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

Gibi MoshMage önerdi, ben bir kullanarak sona erdi *ngIfseçeneklerin birkaç ele bileşenleri için bu işlemek için:

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

Deneyin ng-switch-when-separator="|"içindeng-switch

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

İşte bunu nasıl yapacağım:

İçinde .component.ts:

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

Ardından, şablon dosyanızda şuna benzer bir şey yapabilirsiniz:

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

Yine de yazım hatalarına dikkat edin ...