![](/img/trans.png)
[英]ERROR TypeError: Cannot read property 'length' of undefined angular 8
[英]ERROR TypeError: Cannot read property 'length' of undefined in Angular 7 Drag and Drop
我只是想在@angular/cdk/drag-drop
的Angular 7
DragDropModule
的幫助下創建拖放組件。 但我總是得到如下錯誤。
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>
設置完成后,一切都按預期工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.