时间戳

首页 > 解决方案 > Angular 6：当我尝试将对象传递给 dropData 时，它返回“[Object Object]”

angular - Angular 6：当我尝试将对象传递给 dropData 时，它返回“[Object Object]”

问题描述

预期的输出，如构造函数中的日志值，但它给出了“[Object Object]”。

请帮我。使用说明最小化问题的重现您可以查看我提供的 stackblitz 链接。我得到了'[对象对象]'。

检查链接：https ://stackblitz.com/edit/angular-mevcaz

import { Component } from '@angular/core';
import { DropEvent } from 'angular-draggable-droppable';
import { User } from './user';

@Component({
  selector: 'mwl-demo-app',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  droppedData: Object = '';
  data: User = {'id': 5};
  constructor() {
    console.log(this.data);
   }
   onDrop(dropData: DropEvent<JSON>): void {

    debugger;
    this.droppedData = dropData;
    setTimeout(() => {
      this.droppedData = '';
    }, 2000);
  }
}

组件代码：

<div mwlDraggable dropData="foo" dragActiveClass="drag-active">
  Drag me!
</div>
<div mwlDraggable dropData="{{data}}" dragActiveClass="drag-active" [dragSnapGrid]="{x: 100, y: 100}">
  I snap to a 100 x 100 grid
</div>
<div
  mwlDroppable
  (drop)="onDrop($event.dropData)"
  dragOverClass="drop-over-active">
  <span [hidden]="droppedData">Drop here</span>
  <span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
</div>

标签： angulardrag-and-drop

解决方案

用于属性设置方括号。

所以使用[dropData]="data"而不是dropData="{{data}}"

推荐阅读