Angular 2 元素动态参考

Question

我正在使用这个包在我的应用程序中创建一个弹出框：
https://github.com/pleerock/ng2-popover
问题是我有一个带有ngFor 数据的表，所以我需要为不同的行使用不同的弹出框。代码如下：

<div class="dt-row" *ngFor="let key of keys">
  <popover-content #actions
                   title="Actions"
                   placement="bottom"
                   [animation]="false"
                   [closeOnClickOutside]="true"
                   [closeOnMouseOutside]="false"
                   [disabled]="false"
                   [onHover]="false">
    <a>Edit</a>
    <a>Delete</a>
  </popover-content>

  <div [popover]="actions">
    ...
  </div>
</div>

所以actions 引用对于所有ngFor 实例都是相同的。
我怎样才能使那个 ref 动态？类似[ref]="'actions-' + key.id"。

Answer 1

正如评论所暗示的，您将使用索引：

<div class="dt-row" *ngFor="let key of keys; let i = index;">
            <popover-content #i
                             title="Actions"
                             placement="bottom"
                             [animation]="false"
                             [closeOnClickOutside]="true"
                             [closeOnMouseOutside]="false" >
              {{key.interestingInfo}}
                <a>Edit - {{key.name}}</a>
                <a>Delete - {{key.name}}</a>
            </popover-content>

            <div [popover]="i">
                {{key.clickText + key.name}}
            </div>
    </div>
</div>

这里是一个工作 plunker 的链接，展示了弹出内容具有不同的内容： http://plnkr.co/edit/kVJSnn?p=preview