1. ホーム
  2. angular

[解決済み] Angular - ngForの中のngIfの中のパラメータを持つng-template [重複]。

2023-02-03 02:14:59

質問

私はこのテンプレートを作ろうとしています。

<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にどのようにリンク変数を渡すか理解するのに苦労しています。

この問題に対して、複数の解決策があれば教えていただけると幸いです。

どのように解決するのですか?

次のようにします。

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

ワーキングデモ