Angular 6: когда я пытаюсь передать объект в dropData, он возвращает '[Object Object]' - PullRequest
Новая
       33

Angular 6: когда я пытаюсь передать объект в dropData, он возвращает '[Object Object]'

0 голосов
/ 18 октября 2018

Ожидаемый вывод, такой как значение журнала в конструкторе, но он дает «[Object Object]».

Пожалуйста, помогите мне.Минимальное воспроизведение проблемы с инструкциями.я получил '[Объект Объект]'.

Проверить ссылку: 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>

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Issue

Вы пытаетесь передать значение, но оно не действует @Input.Это просто директива.

Fix

Добавьте скобку [], которая подразумевает, что атрибут является поддержкой для ввода для компонента.

Измените ваш код как - 

<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

0 голосов
/ 18 октября 2018

используйте для настройки атрибута в квадратных скобках.

Поэтому используйте [dropData] = "data" вместо dropData = "{{data}}"

...