我只是想在 Angular 7 的帮助下创建拖放组件DragDropModule
from @angular/cdk/drag-drop
。但我总是收到如下错误。
HomeComponent.html:14 ERROR TypeError: Cannot read property 'length' of undefined
at moveItemInArray (drag-drop.es5.js:1287)
at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.drop (home.component.ts:31)
at Object.eval [as handleEvent] (HomeComponent.html:15)
at handleEvent (core.js:19676)
at callWithDebugContext (core.js:20770)
at Object.debugHandleEvent [as handleEvent] (core.js:20473)
at dispatchEvent (core.js:17125)
at core.js:18615
at SafeSubscriber.schedulerFn [as _next] (core.js:10218)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
这是我的HomeComponent.html
<div style="display: flex;">
<div class="container">
<div class="row">
<h2 style="text-align: center">Movies</h2>
<div cdkDropList #allmovies="cdkDropList" [cdkDropListData]="movies" [cdkDropListConnectedTo]="[towatch]"
(cdkDropListDropped)="drop($event)">
<app-movie *ngFor="let movie of movies" [movie]="movie" cdkDrag></app-movie>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h2 style="text-align: center">Movies to watch</h2>
<div cdkDropList #towatch="cdkDropList" [cdkDropListConnectedTo]="[allmovies]"
(cdkDropListDropped)="drop($event)">
<app-movie *ngFor="let movie of moviesToWatch" [movie]="movie" cdkDrag></app-movie>
</div>
</div>
</div>
</div>
And the HomeComponent.ts
export class HomeComponent {
movies: Movie[];
moviesToWatch: Movie[] = [{
poster_path: '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg'
}];
constructor(private movieService: MovieService) {
this.movieService.get(config.api.topRated)
.subscribe((data) => {
this.formatDta(JSON.parse(data._body).results);
});
}
formatDta(_body: Movie[]): void {
this.movies = _body.filter(movie => movie.poster_path !== '/uC6TTUhPpQCmgldGyYveKRAu8JN.jpg');
}
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
}
我知道我错过了一些东西。但不确定它是什么。非常感谢任何帮助。
我发现这里出了什么问题。如果您注意到 div 中第二个容器的代码cdkDropList #toWatch="cdkDropList"
我缺少房产[cdkDropListData]
这是强制性的,所以我必须设置[cdkDropListData]="moviesToWatch"
如下。
<div cdkDropList #toWatch="cdkDropList" [cdkDropListData]="moviesToWatch" [cdkDropListConnectedTo]="[allmovies]"
(cdkDropListDropped)="drop($event)">
<app-movie class="example-box" *ngFor="let movie of moviesToWatch" [movie]="movie" cdkDrag>{{movie}}</app-movie>
</div>
设置完毕后,一切都按预期进行。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)