ОШИБКА TypeError: Невозможно прочитать свойство 'length' с неопределенным значением в Angular 7 Drag and Drop - PullRequest
Новая
       22

ОШИБКА TypeError: Невозможно прочитать свойство 'length' с неопределенным значением в Angular 7 Drag and Drop

0 голосов
/ 29 октября 2018

Я просто пытаюсь создать компонент перетаскивания с помощью Angular 7 DragDropModule из @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);
    }
  }
}

Я знаю, что что-то упустил. Но не уверен, что это такое. Любая помощь очень ценится.

1 Ответ

0 голосов
/ 29 октября 2018

Я выяснил, в чем здесь проблема. Если вы заметили код для второго контейнера, в 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>

После установки все работало как положено.

...