我创建了一个可拖动元素的组件。
@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 of primitives list(numbers)创建它时,所有元素都会触发拖动开始事件,可以拖动到放置区域。
但是当我使用ngFor of objects列表创建它时,所有元素都会触发拖动开始事件,但可能不会拖动到放置区域(它们不会被拖动)。
< / LI>以下是一个例子:
@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];
}
如何使对象的绑定可拖动?
答案 0 :(得分:1)
这是Angular2机智的Dart bug。使用TypeScript的Angular2在相同的情况下工作正常。
在Angular存储库中创建了一个问题: https://github.com/angular/angular/issues/6975