In php en java kunnen we doen
case 1:
case 2:
echo "something";
zodat wanneer de waarde 1 of 2 is “iets” op het scherm wordt afgedrukt, ik ben een hoekige toepassing aan het bouwen, ik doe zoiets als het onderstaande
<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>
Het formulier dat wordt gebruikt voor enkele keuze kan worden gebruikt voor meerdere keuzes, maar ik heb iets als hieronder geprobeerd om het overzichtelijker te maken
<div [ngSwitch]="data.type">
<div *ngSwitchCase="'multi-choice' || 'singe-choice'">FORM 1</div>
</div>
Mijn pech dat het niet werkte, kan iemand een betere manier voorstellen om dit te doen.
Antwoord 1, autoriteit 100%
(Helaas) kan dat niet; de ngSwitchis nogal “dom” als je naar de broncode kijkt: het is gewoon een ===tussen de case-waarde en de switch-waarde. Je hebt twee opties, maar ze zijn allebei verre van geweldig.
Optie 1 gebruikt de instructie *ngSwitchDefault, maar dit werkt alleen als al uw meerdere gevallen FORM 1 zijn:
<div [ngSwitch]="data.type">
<div *ngSwitchDefault>FORM 1</div>
<div *ngSwitchCase="'range'">FORM 2</div>
</div>
De andere optie, die nogal uitgebreid is, is zoiets als dit te doen:
<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>
Antwoord 2, autoriteit 44%
U kunt ngTemplateOutletgebruiken om dit te implementeren:
<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>
Bijwerken
Hoewel Angular nog steeds overweegteen dergelijke functie, is er de switch-cases.directive.ts. Gebruiksvoorbeeld:
<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>
Antwoord 3, autoriteit 42%
Je kunt ook het volgende gebruiken, wat een stuk flexibeler is. Je kunt dan alles dat evalueert naar boolean als de *ngSwitchCase-waarde plaatsen.
<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>
Het voordeel dat dit heeft ten opzichte van het gebruik van *ngIf-blokken is dat je nog steeds een standaardwaarde kunt opgeven.
Antwoord 4, autoriteit 12%
Hier is een variatie die het tweede antwoord van Fabio combineert met dat van brian3kb om een meer beknopte oplossing te produceren zonder de betekenis te vertroebelen.
Als er meerdere overeenkomsten zijn voor een zaak, wordt array.includes()gebruikt in plaats van elke optie afzonderlijk te vergelijken.
Het is vooral handig als er meer dan twee overeenkomsten zijn, omdat het veel compacter is dan het geaccepteerde antwoord.
<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>
Als de overeenkomsten zich in een variabele bevinden, kunt u array.indexOf()gebruiken om het gebruik van de voorwaardelijke ternaire operator te vermijden.
<div [ngSwitch]="data.type">
<div *ngSwitchCase="matches[matches.indexOf(data.type)]">FORM 1</div>
<!-- ... -->
</div>
Antwoord 5, autoriteit 11%
Zoals MoshMagesuggereerde, gebruikte ik uiteindelijk een *ngIfom dit voor de componenten die verschillende van de opties afhandelden:
*ngIf="['Transformation', 'Field Mapping', 'Filter'].includes(selectedWorkflow.type)"
Antwoord 6, autoriteit 2%
Dit kan worden bereikt met behulp van de ngTemplateOutlet-richtlijn:
<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>
Antwoord 7
Zo zou ik het doen:
In uw .component.ts:
getFormType(type: string) {
switch(type) {
case 'singe-choice':
case 'multi-choice':
return 'singe-choice|multi-choice'
default:
return type;
}
}
Vervolgens kunt u in uw sjabloonbestand zoiets als dit doen:
<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>
Pas echter op voor typefouten…
Antwoord 8
gebruik 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>
Antwoord 9
Probeer ng-switch-when-separator="|"in ng-switch
<div ng-switch="temp">
<div ng-switch-when="1|2" ng-switch-when-separator="|"> echo "something"</div>
</div>
Antwoord 10
<ng-container *ngIf="['text', 'email', 'password', 'number'].includes(f.type!)">
<mat-form-field>
<mat-label>{{f.placeholder}}</mat-label>
<input matInput [attr.type]="f.type" [formControlName]="f.name!">
</mat-form-field>
</ng-container>
Antwoord 11
Het tweede antwoord van Fabio Antunes, maar met een pijp:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'multiSwitchCase',
})
export class MultiSwitchCasePipe implements PipeTransform {
transform<T = any>(cases: T[], value: T): T {
return cases.includes(value) ? value : cases[0];
}
}
<div [ngSwitch]="data.type">
<div *ngSwitchCase="['multi-choice', 'singe-choice'] | multiSwitchCase: data.type">
FORM 1
</div>
</div>