Angular-参数在ngIf内的ng模板在ngFor内 [英] Angular - ng-template with parameter inside ngIf inside ngFor

问题描述

我正在尝试构建此模板:

I am trying to build this 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'"时出错.

The problem is that the link variable is undefined inside the ng-template so I get an error of accessing 'some_property' of undefined.

我正在努力了解如何将链接变量从ngFor传递到ng-template

I am struggeling to understand how I pass the link variable from the ngFor to the ng-template

很高兴知道是否有针对此问题的多种解决方案.

It would be great to know if there are multiple solutions for this problem.

推荐答案

您可以这样做:

<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

这篇关于Angular-参数在ngIf内的ng模板在ngFor内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！