ERROR TypeError: Cannot read property 'length' of undefined in Angular 7 Drag and Drop
ERROR TypeError: Cannot read property 'length' of undefined in Angular 7 Drag and Drop
我只是想在 @angular/cdk/drag-drop
DragDropModule
Angular 7
的帮助下创建拖放组件。但我总是收到如下错误。
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>
还有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>
设置之后,一切正常。
我只是想在 @angular/cdk/drag-drop
DragDropModule
Angular 7
的帮助下创建拖放组件。但我总是收到如下错误。
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>
还有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>
设置之后,一切正常。