似乎无法弄清楚为什么这不起作用。
因此，正如您在此 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 的控制台输出：
知道为什么该项目会消失吗？
更新 Plunker：http ://plnkr.co/edit/U5AjZ0Gqnxq8bAznYueG?p=preview