Angular 2 元素动态参考

Question

我正在使用这个包在我的应用程序中创建一个弹出窗口：
https://github.com/pleerock/ng2-popover
问题是我有一个 table 和 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>

这里有一个 link 给一个正在工作的 plunker，演示弹出内容有不同的内容： http://plnkr.co/edit/kVJSnn?p=preview

Angular 2 元素动态参考

Angular 2 element dynamic ref

angular

popover