Angular2 $event 如何添加到目标数据绑定或结构指令？答案

【问题标题】：Angular2 $event how to add to target databind or structure directive?Angular2 $event 如何添加到目标数据绑定或结构指令？
【发布时间】：2017-01-11 09:20:37
【问题描述】：

我在组件内跨视图传输数据时遇到问题。我做拖放;当我拖动数据添加到组件变量，然后我放下数据，它添加到方法的局部变量。

查看：

<tr>

              <td class="imported-table_data">
                  <h3>User name</h3>
                  <p>Simple name</p>
              </td>

              <td pDroppable="dd"
                  (onDrop)="dropped($event)"
                  class="imported-table_field" >
              </td></tr>


<tr *ngFor="let data of tableData" class="instance-table_row">
    <td pDraggable="dd" class="instance-table_data (onDragStart)="dragStart($event, data)">
     <h3>{{ data.title }}</h3>
     <p>{{ data?.data }}</p>
    </td>

</tr>

组件：

 dropped (event: Event) : void {
let data = this.tableCurrentData;
console.log('-----------------');
console.log(event);
console.log('-----------------');
this.tableCurrentData = null;}




dragStart (event: Event, data: any) : void {
console.log(event);
this.tableCurrentData = data;}

在这种情况下，我得到了具有当前 TD 的 event.target，如何将我选择的数据添加到当前 TD 中？

【问题讨论】：

您可以使用 Drop 作为示例回复，它可以工作 :-)

标签： angular drag-and-drop

【解决方案1】：

在你的(onDragStart) 中你应该使用那个：

 this.onDragStart.emit({
  data: yourdata,
  event:yourdata
  //other variable
})

你应该在html中使用你的函数

<td pDraggable="dd" class="instance-table_data (onDragStart)="dragStart($event.event,$event.data)">

在你的 Typescript 文件中的函数中：

public dragStart(event: any, data: string) {
//your code here
}

【讨论】：