web-dev-qa-db-fra.com

Comment faire un if-else Angular avec seulement ng-container?

Je voudrais faire une déclaration if-else dans mon modèle angular. J'ai commencé avec ça:

<ng-container *ngIf="contributeur.deb; else newDeb" >
    [... HERE IS A RESULT 1]
</ng-container>
<ng-template #newDeb>
    [... HERE IS A RESULT 2]
</ng-template>

Et j'ai essayé d'utiliser uniquement ng-container:

<ng-container *ngIf="contributeur.deb; else newDeb" >
    [... HERE IS A RESULT 1]
</ng-container>
<ng-container #newDeb>
    [... HERE IS A RESULT 2]
</ng-container >

Malheureusement ça ne fonctionne pas. J'ai cette erreur:

ERROR TypeError: templateRef.createEmbeddedView is not a function
    at ViewContainerRef_.createEmbeddedView (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:10200:52)
    at NgIf._updateView (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:2013:45)
    at NgIf.set [as ngIfElse] (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:1988:18)
    at updateProp (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:11172:37)
    at checkAndUpdateDirectiveInline (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:10873:19)
    at checkAndUpdateNodeInline (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12290:17)
    at checkAndUpdateNode (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12258:16)
    at debugCheckAndUpdateNode (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12887:59)
    at debugCheckDirectivesFn (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12828:13)
    at Object.eval [as updateDirectives] (ActionsButtons.html:5)

Quelqu'un peut-il m'expliquer ce qui ne va pas dans ce code?

angularif-statementangular-template
16
Thomas Betous

Le code de la directive ngIf s'attend à recevoir une référence à un modèle ( TemplateRef ) pour la branche else, qu'il appelez createEmbeddedView on pour afficher le contenu imbriqué. Par conséquent, cela n'a aucun sens d'essayer d'utiliser un autre type d'élément pour le contenu else - cela ne fonctionnera tout simplement pas. Vous pouvez imbriquer un ng-container à l'intérieur du ng-template si besoin est, cependant.

Cela peut sembler peu intuitif, mais gardez à l'esprit que directives structurelles (c'est-à-dire celles que vous appelez avec un *) sont toujours représentés par ng-template sous le capot, quel que soit le type d'élément auquel ils sont attachés - ces deux morceaux de code sont les mêmes:

<ng-container *ngIf="contributeur.deb; else newDeb" >
    ...
</ng-container>
<ng-template #newDeb>
    ...
</ng-template>

<ng-template [ngIf]="contributeur.deb; else newDeb">
    <ng-container>
        ...
    </ng-container>
</ng-template>
<ng-template #newDeb>
    ...
</ng-template>
34
Joe Clay