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

Question

似乎无法弄清楚为什么这不起作用。

因此，正如您在此 GIF 中看到的那样，我将一个 div 从一个容器拖到另一个容器，ondrop` 对象消失并且数组变得未定义。

这是我的代码：

主视图.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>

主视图.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.ts

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

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

如您在Main View.ts 中看到的那样，当我退出时，我正在订阅dropModel 事件并注销以查看发生了什么。 此处为上面拖动的 GIF 的控制台输出：

知道为什么该项目会消失吗？

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

Answer 1

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

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