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

模板引用变量在封闭视图中是唯一的。 *ngFor指令为每个项目创建嵌入式视图，因此模板引用变量在那里是唯一的。

因此，请尝试以下操作：

<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

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

1 个答案: