web-dev-qa-db-ja.com

コンポーネント間でAngular 7 cdkDropListを使用する方法は？

画面左側のマットリストコンポーネント（一般リスト）にアイテム（学生）のリストがあります。画面の右側にクラスルームコンポーネントのリストもあります。各クラスルームコンポーネントには、生徒のマットリストがあります。

angularの新しい Drag＆Drop APIを使用して、生徒を一般リストからクラスルームコンポーネント内に含まれる生徒リストの1つにドラッグできるようにしたい材料

擬似コードは次のようになります。

<mat-list #studentsList="cdkDropList" cdkDropList [cdkDropListData]="students">
  <mat-list-item cdkDrag *ngFor="let student of studentes">
    {{student.name}}
  </mat-list-item>
</mat-list>

<div class="right-panel>
  <app-class-room *ngFor="let cr of classRooms" [classRoom]="cr"></app-class-room>
</div>

明らかに、Class-roomコンポーネント内の学生リストにアクセスできないため、一般リストの[cdkDropListConnectedTo]入力を使用できません。どうすればよいですか？

angulardrag-and-dropangular-materialangular7
4
Patrick M.

APIドキュメント ：に記載されているように、参照の代わりに文字列を使用できます。

@ Input（ 'cdkDropListConnectedTo'）connectedTo：（CdkDropList | string）[] | CdkDropList |文字列

このコンテナが接続され、コンテナのアイテムを転送できる他のドラッグ可能なコンテナ。他のドロップコンテナへの参照、またはそれらの一意のIDのいずれかです。

ドロップ可能なすべての要素IDのリストを使用して例を作成しました。

allDropLists = [ 'studentsList', ...this.classRooms
 .map(_ => _.name)];

これを入力としてClassRoomComponentに渡します：

<app-class-room
    *ngFor="let classRoom of classRooms" 
    [classRoom]="classRoom" [allDropLists]="allDropLists">

完全な実行例はここにあります。

1
ibenjelloun

CdkDropListGroupを親divとして使用することもできます。子要素は、その数や場所（ngForなど）に関係なく、グループの一部になります。その後、divをの反対側に配置できます。 CSSを使用したビュー。ドロップリストをまとめて動的に作成する場合に役立ちます

1
Andres