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 ref 对于所有 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