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

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>

主要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<>.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

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

ng2-dragula modelDrop event causing array to be undefined

typescript

dragula

ng2-dragula

angular