web-dev-qa-db-ja.com

if-else Angular ng-containerのみのテンプレートを作成するには？

angularテンプレートでif-elseステートメントを作成したいと思います。

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

そして、私は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 >

残念ながら、これは機能しません。私はこのエラーがあります：

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)

誰でもこのコードで何が間違っているのか説明できますか？

angularif-statementangular-template
16
Thomas Betous

ngIfディレクティブのコード は、elseブランチのテンプレートへの参照が渡されることを想定しています（ TemplateRef ） createEmbeddedView onを呼び出して、ネストされたコンテンツを表示します。したがって、elseコンテンツに他の種類の要素を使用しようとしても意味がありません。機能しません。ただし、必要に応じて、ng-containerinsideng-templateをネストできます。

これは直感的ではないように思えるかもしれませんが、 構造ディレクティブ （つまり、*で呼び出すもの）はalwaysボンネットの下のng-templateとして表されます。どの種類の要素に関連付けられていても、これらの2つのコードは同じです。

<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