ngFor内部的动态模板参考变量(Angular 2) [英] Dynamic template reference variable inside ngFor (Angular 2)

问题描述

如何在ngFor元素内声明动态 模板引用变量?

我想使用ng-bootstrap中的popover组件，弹出代码(带有HTML绑定)如下所示:

I want to use the popover component from ng-bootstrap, the popover code (with Html binding) is as shown:

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

如何包装 ngFor中的那些元素?

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

嗯...有什么主意吗?

Hmmm... any idea?

推荐答案

模板引用变量的作用域仅限于定义它们的模板.结构化伪指令创建一个嵌套模板，因此引入了一个单独的作用域. /strong>

Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope.

因此，您可以仅使用一个变量作为模板参考

So you can just use one variable for your template reference

<div *ngFor="let member of members">
  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
      I've got markup and bindings in my popover!
  </button>
</div>

，它应该起作用，因为它已经在<ng-template ngFor

and it should work because it has already declared inside <ng-template ngFor

柱塞示例

Plunker Example

有关更多详细信息，请参见:

For more details see also:

• angular-有条件的重复templateref在ng中-选择器内容

这篇关于ngFor内部的动态模板参考变量(Angular 2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！