Question

似乎无法理解为什么这不起作用。

因此，您可以在此GIF中看到我将div从一个容器拖到另一个容器，ondrop`对象消失，数组变得未定义。

这是我的代码：

主要View.html

<div *ngIf="tvRequests">
    <div class="col-md-4">
        <div class="landing-box">
            <md-card-title>Title</md-card-title>
            <div [dragula]='"requests-bag"' [dragulaModel]="tvRequests.new">
                <br />
                <br />
                <request-card *ngFor="let item of tvRequests.new" [request]="item"></request-card>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="landing-box">

            <div [dragula]='"requests-bag"' [dragulaModel]="tvRequests.approved">
                <br />
                <br />
                <request-card *ngFor="let item of tvRequests.approved" [request]="item"></request-card>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="landing-box">
            <md-card-title>Title</md-card-title>
            <div style="border: dashed">
                <div [dragula]='"requests-bag"' [dragulaModel]="tvRequests.available">
                    <br />
                    <br />
                    <request-card *ngFor="let item of tvRequests.available" [request]="item"></request-card>
                </div>
            </div>
        </div>
    </div>
</div>

Main View.ts

import { Component, OnInit } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
import { RequestService } from '../services/request.service';
import { ITvRequestModel, IMovieRequestModel, IRequestGrid } from '../interfaces/IRequestModel';

@Component({
    moduleId: module.id,
    templateUrl: './request-grid.component.html'
})
export class RequestGridComponent implements OnInit {

    constructor(private dragulaService: DragulaService, private requestService: RequestService) {
        this.dragulaService.dropModel.subscribe((value: any) => {
            console.log(value);
            console.log(this.tvRequests.new);
            console.log(this.tvRequests.approved);
            console.log(this.tvRequests.available);
        });
    }

    ngOnInit(): void {
        this.requestService.getMovieGrid().subscribe(x => {
            this.movieRequests = x;
        });
        this.requestService.getTvGrid().subscribe(x => {
            this.tvRequests = x;
        });
    }


    movieRequests: IRequestGrid<IMovieRequestModel>;
    tvRequests: IRequestGrid<ITvRequestModel>;

}

RequestsGrid＆LT;＆GT; .TS

export interface IRequestGrid<T> {
    available: T[],
    new: T[],
    approved:T[]
}

request-card组件只是一些样式，不包含任何代码。

当我在Main View.ts中看到我放弃时，我正在订阅dropModel事件并注销以查看正在发生的事情。这里拖动GIF的控制台输出：

知道为什么物品消失了吗？

更新 Plunker：http://plnkr.co/edit/U5AjZ0Gqnxq8bAznYueG?p=preview

Answer 1

看起来导致问题的是<br/>标签！

https://github.com/valor-software/ng2-dragula/issues/742#issuecomment-308930617

ng2-dragula modelDrop事件导致数组未定义

1 个答案: