javascript - Angular 4 - 使用 Angular 的 *ngFor 在 HTML 上打印唯一的动态值

Question

因此，我收到了客户端的一项任务，即使 div 元素循环可拖动。为了实现这一点，我使用了 angular2-draggable使之成为可能。

它适用于尚未循环的单个 div，如下所示:

<div ngDraggable [handle]="DemoHandle" class="card">
  <div #DemoHandle class="card-header">I'm handle. Drag me!</div>
  <div class="card-block">You can't drag this block now!</div>
</div>

但问题是，如何将此代码放入 Angular 中的 *ngFor 循环中(也许就像下面看到的代码一样)？

<div *ngFor="let myValue of myValues" [handle]="{{myValue.id}}">
   <div #{{ myValue.id }} >{{ myValue.title }}</div>
</div>

这里的问题是，这个 [handle]="DemoHandle" 和 #DemoHandle (我正在谈论 DemoHandle 值)都需要是唯一的。但我无法打印类似于下面代码的唯一值:

<div *ngFor="let myValue of myValues">
   <div [attr.id]="myValue.id" >{{ myValue.title }}</div>
</div>

我该如何解决这个问题？

Answer 1

模板引用变量在封闭 View 中是唯一的。 *ngFor 指令为每个项目创建嵌入 View ，以便模板引用变量在那里是唯一的。

所以只需尝试以下操作:

<div ngDraggable *ngFor="let item of [1,2,3]" [handle]="DemoHandle">
  <div #DemoHandle class="card-header">I'm handle {{item}}. Drag me!</div>
  ...
</div>

<强> Ng-run Example