Angular - ngFor 内の ngIf 内のパラメータを持つ ng-template [重複] 質問する

2024-07-03 • tag-icon

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にリンク変数を渡す方法がわかりません

この問題に複数の解決策があるかどうかを知ることができれば幸いです。

ベストアンサー1

次のようにできます:

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

動作デモ

ベストアンサー1

おすすめ記事