Hoe zou ik meerdere hoofdletters in een *ngIf
-statement hebben? Ik ben gewend aan Vue of Angular 1 met een if
, else if
en else
, maar het lijkt erop dat Angular 4 alleen een true
(if
) en false
(else
) voorwaarde.
Volgens de documentatie kan ik alleen het volgende doen:
<ng-container *ngIf="foo === 1; then first else second"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>
Maar ik wil meerdere voorwaarden hebben (zoiets als):
<ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>
Maar uiteindelijk moet ik ngSwitch
gebruiken, wat aanvoelt als een hack:
<ng-container [ngSwitch]="true">
<div *ngSwitchCase="foo === 1">First</div>
<div *ngSwitchCase="bar === 2">Second</div>
<div *ngSwitchDefault>Third</div>
</ng-container>
Het lijkt erop dat veel van de syntaxis die ik gewend ben van Angular 1 en Vue niet worden ondersteund in Angular 4, dus wat is de aanbevolen manier om mijn code te structureren met dergelijke voorwaarden?
p>
Antwoord 1, autoriteit 100%
Een ander alternatief is om voorwaarden te nesten
<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
<ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>
Antwoord 2, autoriteit 18%
Je kunt gewoon gebruiken:
<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>
tenzij het ng-container-gedeelte belangrijk is voor je ontwerp, neem ik aan.
Hier is een Plunker
Antwoord 3, autoriteit 16%
Dit lijkt de schoonste manier om te doen
if (foo === 1) {
} else if (bar === 99) {
} else if (foo === 2) {
} else {
}
in de sjabloon:
<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
<ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
<ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>
Merk op dat het werkt als een goede else if
-instructie zoumoeten zijn wanneer de voorwaarden verschillende variabelen betreffen (slechts 1 geval is waar tegelijk). Sommige van de andere antwoorden werken in zo’n geval niet goed.
terzijde: goh hoekig, dat is echt lelijke else if
sjablooncode…
Antwoord 4, autoriteit 10%
U kunt meerdere manieren gebruiken op basis van situatie:
-
Als uw variabele beperkt is tot een specifiek Numberof String, kunt u het beste ngSwitch of ngIf gebruiken:
<!-- foo = 3 --> <div [ngSwitch]="foo"> <div *ngSwitchCase="1">First Number</div> <div *ngSwitchCase="2">Second Number</div> <div *ngSwitchCase="3">Third Number</div> <div *ngSwitchDefault>Other Number</div> </div> <!-- foo = 3 --> <ng-template [ngIf]="foo === 1">First Number</ng-template> <ng-template [ngIf]="foo === 2">Second Number</ng-template> <ng-template [ngIf]="foo === 3">Third Number</ng-template> <!-- foo = 'David' --> <div [ngSwitch]="foo"> <div *ngSwitchCase="'Daniel'">Daniel String</div> <div *ngSwitchCase="'David'">David String</div> <div *ngSwitchCase="'Alex'">Alex String</div> <div *ngSwitchDefault>Other String</div> </div> <!-- foo = 'David' --> <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template> <ng-template [ngIf]="foo === 'David'">David String</ng-template> <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
-
Bovenstaande niet geschikt voor if elseif elsecodes en dynamische codes, u kunt onderstaande code gebruiken:
<!-- foo = 5 --> <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container> <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container> <ng-container *ngIf="foo >= 7; then t7"></ng-container> <!-- If Statement --> <ng-template #t13> Template for foo between 1 and 3 </ng-template> <!-- If Else Statement --> <ng-template #t46> Template for foo between 4 and 6 </ng-template> <!-- Else Statement --> <ng-template #t7> Template for foo greater than 7 </ng-template>
Opmerking: je kunt elk formaat kiezen, maar merk op dat elke code zijn eigen problemen heeft
Antwoord 5, autoriteit 6%
Om nesting en ngSwitch te voorkomen, is er ook deze mogelijkheid, die gebruikmaakt van de manier waarop logische operators in Javascript werken:
<ng-container *ngIf="foo === 1; then first; else (foo === 2 && second) || (foo === 3 && third)"></ng-container>
<ng-template #first>First</ng-template>
<ng-template #second>Second</ng-template>
<ng-template #third>Third</ng-template>
Antwoord 6, autoriteit 5%
Of gebruik misschien voorwaardelijke ketens met een ternaire operator. if … else if … else if … else
keten.
<ng-container [ngTemplateOutlet]="isFirst ? first : isSecond ? second : third"></ng-container>
<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>
Ik vind deze benadering beter.
Antwoord 7, autoriteit 3%
je hoeft *ngIf niet te gebruiken als je ng-container gebruikt
<ng-container [ngTemplateOutlet]="myTemplate === 'first' ? first : myTemplate ===
'second' ? second : third"></ng-container>
<ng-template #first>first</ng-template>
<ng-template #second>second</ng-template>
<ng-template #third>third</ng-template>
Antwoord 8
<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
<ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>
</ng-template>
Antwoord 9
Ik kwam dit soort situaties tegen *ngIf elseIf else
en ik loste het op met behulp van ng-template
. Ik hoop dat het volgende fragment een korte weergave is,
Ik heb een formulierbesturingselement met de naam “NIC” en moet één foutbericht per keer weergeven wanneer het formulierbesturingselement ongeldig is.
form: FormGroup = new FormGroup({
NIC: new FormControl('', [Validators.required, Validators.minLength(10), Validators.maxLength(10), Validators.pattern("^[0-9]*$")])
});
Sjabloon
<mat-form-field appearance="standard">
<mat-label>NIC Number</mat-label>
<input matInput placeholder="Enter NIC no" formControlName="NIC">
<mat-error *ngIf="form.controls['NIC'].errors?.required; else minvalue">This field is mandatory.
</mat-error>
<ng-template #minvalue>
<mat-error *ngIf="form.controls['NIC'].errors?.minlength; else maxvalue">Minimum 10 charactors
needed.
</mat-error>
</ng-template>
<ng-template #maxvalue>
<mat-error *ngIf="form.controls['NIC'].errors?.maxLength; else numericonly">Maximum 10
charactors allowed.
</mat-error>
</ng-template>
<ng-template #numericonly>
<mat-error *ngIf="form.controls['NIC'].errors?.pattern">
Numeric characters only.
</mat-error>
</ng-template>
</mat-form-field>
Antwoord 10
Je kunt deze oude truc ook gebruiken om complexe if/then/else-blokken om te zetten in een iets schonere switch-instructie:
<div [ngSwitch]="true">
<button (click)="foo=(++foo%3)+1">Switch!</button>
<div *ngSwitchCase="foo === 1">one</div>
<div *ngSwitchCase="foo === 2">two</div>
<div *ngSwitchCase="foo === 3">three</div>
</div>