使用 ngFor 绑定对象时，组件在 Angular2 for Dart 中不可拖动

Question

>我创建了一个可拖动元素的组件。

@Component(
    selector: 'draggable-component',
    styles: const ['.element-to-drag {background-color: yellow; border: 1px solid blue; height: 50px; width: 50px;}'],
    template: '''
      <div class="element-to-drag"
           draggable="true"
           (dragstart)="onDragStart($event)"
           (dragend)="onDragEnd($event)">
      </div>''')
class DraggableComponent {
  void onDragStart(MouseEvent e) {
    print('onDragStart');
  }
  void onDragEnd(MouseEvent e) {
    print('onDragEnd');
  }
}

• 当我将其用作单个元素时，它会触发拖动开始事件并可以拖动到拖放区。

• 当我使用基元列表（数字）的 ngFor 创建它时，所有元素都会触发拖动开始事件，并且可以拖动到放置区。

• 但是当我使用 ngFor 对象列表创建它时，所有元素都会触发拖动开始事件，但无法拖动到拖放区（它们不会被拖动）。

下面是一个示例：

@Component(
    selector: 'my-app',
    directives: const [DraggableComponent, NgFor],
    styles: const ['.container {border: 1px solid red;; height: 100px; width: 100px;}'],
    template: '''
  <div>
    <div class="container"></div>
    <h3>Single</h3>
    <draggable-component></draggable-component>
    <h3>Primitives</h3>
    <draggable-component *ngFor="#example of examplesPrimitives"></draggable-component>
    <h3>Objects</h3>
    <draggable-component *ngFor="#example of examples"></draggable-component>
  </div>
  ''')
class AppComponent {
  get examples => [
    {"name": 1},
    {"name": 2},
    {"name": 3},
    {"name": 4} ];
  get examplesPrimitives => [ 1,2,3,4,5];
}

如何使对象的绑定可拖动？

Answer 1

这是 Angular2 机智的飞镖错误。带有TypeScript的Angular2在相同情况下工作正常。

在 Angular 存储库中创建了一个问题：https://github.com/angular/angular/issues/6975