Components are not draggable in Angular2 for Dart when bind objects using ngFor - dart

Question

I've created a component which is a draggable element.
#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');
}
}
When I use it as a single element it fires drag start event and COULD BE dragged to the drop zone.
When I create it using ngFor of primitives list (numbers) all elements fire drag start event and COULD BE dragged to the drop zone.
But when I create it using ngFor of objects list all elements fire drag start event but COULD NOT BE dragged to the drop zone (they are not dragged).
Here is an example:
#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];
}
How can I make bindings of objects draggable?

Answer 1

It was Angular2 wit Dart bug. Angular2 with TypeScript works fine in the same case.
An issue was created in Angular repository:
https://github.com/angular/angular/issues/6975