web-dev-qa-db-ja.com

Angular-ngFor内にngIf内のパラメーターを持つng-template

私はこのテンプレートを構築しようとしています：

<ul>
    <li *ngFor='let link of links'>
        <ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container>
    </li>
</ul>

<ng-template #simpleLink>
    ...
    {{ link.some_property }}
</ng-template>

<ng-template #complexLink>
    ...
    {{ link.some_property }}
</ng-template>

問題は、ng-template内でリンク変数が未定義であるため、未定義の「some_property」にアクセスする際にエラーが発生することです。

リンク変数をngForからng-templateに渡す方法を理解するのに苦労しています

この問題に複数の解決策があるかどうかを知ることは素晴らしいことです。

angularangular-templateng-template
24
yanivps

次のようにできます：

<ul>
    <li *ngFor='let link of links'>
        <ng-container 
             [ngTemplateOutlet]="link.type == 'complex' ?complexLink : simpleLink" 
             [ngTemplateOutletContext]="{link:link}">
        </ng-container>
    </li>
</ul>

<ng-template #simpleLink let-link='link'>
    Simple : {{ link.name }}
</ng-template>

<ng-template #complexLink let-link='link'>
    Complex : {{ link.name }}
</ng-template>

WORKING DEMO

76
Vivek Doshi