angular - 错误类型错误:无法读取 Angular 7 拖放中未定义的属性“长度”
问题描述
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>
和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>
设置之后,一切都按预期工作。
推荐阅读
- c++ - 是否可以在 dart 的原生扩展的 c++ 代码中使用 STL 对象?
- postgresql - PostgreSQL - 如何在列上执行循环
- image-processing - 正向查找表(LUT)和反向LUT,是什么?为什么使用它?
- android - recyclerview setHasFixedSize(boolean)上的Android运行时错误
- kernel - 在 Google Colab 中重启内核
- javascript - 同步 Javascript 和 PHP
- html - BootStrap 模态显示不正确
- java - 如何在 Java 8 中替换以下代码?
- r - 在 R 中读取空间分隔数据集以获取频繁项
- angular - Angular 7 中的日期提前 3 小时