cdkDropList, как связать / обновить данные обратно в массив / источник?

Question

В этом простом Stackbliz на основе списка перетаскивания CDK Angular я использую событие drop () для проверки значений фильмов массива. Как построить двустороннюю привязку, чтобы зафиксировать изменение значения данных обратно в массив?

[(cdkDropListData)]="movies" не сделает этого.

Answer 1

Вам не хватает импорта DragDropModule.

На примере сайта компоненты / src / components-examples / cdk / drag-drop он находится в index.ts.

main.ts

import './polyfills';
...    
import { DragDropModule } from '@angular/cdk/drag-drop';

import {CdkDragDropCustomPlaceholderExample} from './app/cdk-drag-drop-custom-placeholder-example';

@NgModule({
  imports: [
    ...
    DragDropModule
  ],
  ...
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Связывание ввода

На основе комментариев вы хотите выполнить двустороннюю привязку входов.

Необходимо добавить следующее, если вы используете перетаскивание или нет.

• Banana-in-box на <input>
• A * Функция 1025 * в выражении ngFor
• Привязка к movies[i] (не будет работать привязка к movie)

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" 
    *ngFor="let movie of movies; index as i; trackBy: trackByFn" 
    cdkDrag
  >
    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
    <input type="text" [(ngModel)]="movies[i]"/>
  </div>
</div>

export class CdkDragDropCustomPlaceholderExample {

  ...    
  drop(event: CdkDragDrop<string[]>) {
    alert(`Before drop update: ${this.movies}`);
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
    alert(`After drop update: ${this.movies}`);
  }

  trackByFn(index: number, item: String) {
    return index;
  }
}

Stackblitz

Я запускаю оповещение до и после выпадающего обновления, выбирайте.