*ngIf d'autre si, dans le modèle

Comment aurais-je un cas multiples dans un *ngIf déclaration? Je suis habitué à Vue ou Angulaire 1 avec le fait d'avoir un if, else if, et else, mais il semble Angulaire 4 ne dispose que d'un true (if) et false (else) condition.

Selon la documentation, je ne peux le faire:

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

Mais je veux avoir plusieurs conditions (quelque chose comme):

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

Mais je suis en terminant avoir à utiliser ngSwitch, qui se sent comme un hack:

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

Alternativement, il semble que beaucoup de syntaxes j'ai utilisé pour Angulaires 1 et la Vue ne sont pas pris en charge dans Angulaire 4, alors quelle serait la méthode recommandée pour la structure de mon code avec des conditions comme ça?

  • Je pensais que vous hack est la meilleure solution car elle était la plus lisible. Cependant, j'ai réalisé que angulaires instructions de commutation de permettre plusieurs critères de correspondance si vous n'obtenez pas que la vraie elseif logique.
InformationsquelleAutor CmdrShepardsPie | 2017-05-05
  1. 80

    Une autre alternative est de nid conditions

    <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>
    • C'était la meilleure solution pour moi. Mes conditions étaient fondées sur de multiples variables et sont susceptibles d'être vrais en même temps.
    InformationsquelleAutor CornelC
  2. 29

    Vous pouvez simplement utiliser:

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

    à moins que le gn-conteneur est important pour votre design, je suppose.

    Voici un Plunker

    • Mon exemple est un peu simpliste, mais attend le 'else if' comportement, tels que if (index === 1) else if (foo === 2) qui doivent être écrits if (index === 1) if (index !== 1 && foo === 2) qui est un peu sale et plus sujettes à des erreurs, le plus de fois nous avons à écrire logique inverse.
    • Avez-vous regardé le plunker? Je ne pense pas voir le problème, index ne va être 1 chose à la fois.
    • Je pense que c'est mon exemple qu'il manque une explication, voici un exemple en JS: if (item === 'food' && kind === 'hamburger') {} else if (item === 'food' && kind === 'hotdog') {} else if (item === 'drink' && kind === 'beer') {} else if (item === 'drink' && kind === 'wine') {} else { /* could be poisonous */ }
    • Encore trop de l'exclusion mutuelle dans cet exemple, mais encore, le point est, j'ai besoin de faire si, else if et else, et pas seulement si et d'autre sans en écrire des tonnes de logiques redondantes. Il semble Angulaire de 4 modèles ne disposent pas de ce type de logique.
    • il ya quelques autres options , cela sonne comme vous pouvez bénéficier d'une NgTemplateOutlet avec le contexte, par exemple: *ngTemplateOutlet="boire; le contexte: de la bière", ou peut-être un autre composant pour la catégorisation.
    • Cela ne permet pas d'émuler des instructions if, elseif, else fonctionnalité à tous, pour les raisons @ChrisSimpson dit.
    • Regarde comme les plus grands avantages pour passer en serait la condition par défaut et le fait que c'est un peu plus évident lors de la lecture du html qu'il y a un choix

    InformationsquelleAutor Dylan
  3. 20

    Cela semble être la façon la plus propre à faire 

    if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

    dans le modèle:

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

    Avis qu'il fonctionne comme un bon else if déclaration doit lorsque les conditions impliquer les différentes variables (1 seul cas est vrai à un moment). Certains des autres réponses ne fonctionne pas dans ce cas.

    de côté: gosh angulaire, c'est vraiment laid else if code du modèle...

    InformationsquelleAutor goat
  4. 13

    Vous pouvez utiliser plusieurs façon sur la base d'sitaution:

    1. Si vous Variable est limitée à des Nombre ou Chaîne, le meilleur moyen est d'utiliser ngSwitch ou 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. Ci-dessus ne convient pas pour les si elseif else des codes et des codes dynamiques, vous pouvez utiliser le code ci-dessous:

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

    Remarque: Vous pouvez choisir n'importe quel format, mais l'avis de tous les code a propres problèmes

    • OMI 2. devrait lire *ngIf="foo >= 7; then t7" au lieu de ... else t7.
    InformationsquelleAutor Sina Lotfi