html - navigationend - router events subscribe angular 4

* ng De lo contrario, si está en la plantilla

Question

¿Cómo tendría múltiples casos en una declaración *ngIf ? Estoy acostumbrado a Vue o Angular 1 con tener un if , else if y else , pero parece que Angular 4 solo tiene una condición true ( if ) y false ( else ).

Según la documentación, solo puedo hacer:

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

Pero quiero tener múltiples condiciones (algo así como):

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

Pero estoy terminando teniendo que usar ngSwitch , que se siente como un truco:

 <ng-container [ngSwitch]="true">
<div *ngSwitchCase="foo === 1">First</div>
<div *ngSwitchCase="bar === 2">Second</div>
<div *ngSwitchDefault>Third</div>
</ng-container>

Alternativamente, parece que muchas de las sintaxis a las que me he acostumbrado desde Angular 1 y Vue no son compatibles con Angular 4, entonces, ¿cuál sería la forma recomendada de estructurar mi código con condiciones como esta?

Answer 1

Esta parece ser la forma más limpia de hacerlo

if (foo === 1) {
} else if (bar === 99) {
} else if (foo === 2) {
} else {
}

en la plantilla:

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

Tenga en cuenta que funciona como una instrucción else if si las condiciones implican diferentes variables (solo 1 caso es verdadero a la vez). Algunas de las otras respuestas no funcionan bien en tal caso.

a un lado: Dios angular, eso es algo realmente feo else if código de la plantilla ...

Answer 2

Otra alternativa es anidar las condiciones.

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

Answer 3

Puede usar varias formas según la situación:

1. Si su variable está limitada a un número o cadena específicos, la mejor manera es usar ngSwitch o ngIf:

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

2. Lo anterior no es adecuado para los códigos ifififif y más dinámicos, puede usar el siguiente código:

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

Nota: puede elegir cualquier formato, pero observe que cada código tiene sus propios problemas

Answer 4

Solo puedes usar:

<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>

a menos que la parte ng-container sea importante para su diseño, supongo.

Aquí hay un Plunker