ngFor(Angular 2)中的动态模板引用变量

发布时间：2020-12-17 08:03:13 所属栏目：安全来源：网络整理

导读：如何在ngFor元素中声明动态模板引用变量？我想使用ng-bootstrap中的popover组件,popover代码(带有Html绑定)如下所示： ng-template #popContentHello,b{{name}}/b!/ng-template button type="button" class="btn btn-secondary" [ngbPopover]="popContent"

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

我想使用ng-bootstrap中的popover组件,popover代码(带有Html绑定)如下所示：

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

嗯……任何想法？

模板引用变量的范围限定在它们定义的模板中.结构指令创建嵌套模板,因此引入了单独的范围.

因此,您只需使用一个变量作为模板参考

<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中声明了 Plunker Example

有关详细信息,请参阅：

> angular – conditional duplicate templateref in ng-content with selector

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!