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

Question

预期的输出，如构造器中的日志值，但给出的是[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>

Answer 1

用于属性设置方括号。

因此，请使用 [dropData] =“ data” 代替 dropData =“ {{data}}”

Answer 2

问题

您试图传递该值，但不起作用@Input。它只是指令。

修复

添加括号[]，表示该属性支持作为组件的输入。

将代码更改为-

<div mwlDraggable [dropData]="data" 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)"
  dragOverClass="drop-over-active">
  <span [hidden]="droppedData">Drop here</span>
  <span [hidden]="!droppedData">Item dropped here with data: "{{ droppedData }}"!</span>
</div>

工作副本在这里-https://stackblitz.com/edit/angular-3fsoyx